MyCanvas

本文展示了一个使用Java实现的简单图形界面应用示例,该应用通过监听键盘和鼠标事件来更新界面上显示的文本。具体包括键盘输入字符的显示、鼠标点击等交互行为。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

import java.awt.*;

import java.awt.event.*;

import java.util.*;

 

public class MyCanvas implements KeyListener,MouseListener{

  Canvas c;

  String s="";

  TextField t;

 

  public static void main(String arg[]){

    Frame f=new Frame("Canvas");

    MyCanvas mc=new MyCanvas();

    mc.c=new Canvas();

    mc.t=new TextField();

    f.add("South",mc.t);

    f.add("Center",mc.c);

    f.setSize(300,150);

    mc.c.addMouseListener(mc);

    mc.c.addKeyListener(mc);

    f.setVisible(true);

  }

 

  public void keyTyped(KeyEvent ev){

    t.setText("KeyTyped");

    s+=ev.getKeyChar();

 

    C.getGraphics().drawString(s,0,20);

  }

 

  public void keyPressed(KeyEvnet ev){}

 

  public void keyReleased(KeyEvent ev){

    t.setText("keyReleased");

  }

 

  public void mouseClicked(MouseEvent ev){

    t.setText("mouseClicked");

    c.requestFocus();

  }

 

  public void mousePressed(MouseEvent ev){

    t.setText("mousePressed");

  }

 

  public void mouseReleased(MouseEvent ev){

    t.setText("mouseEntered");

  }

 

  public void mouseExited(MouseEvent ev){

    t.setText("mouseExited");

  }

}

  

 

 

<template> <canvas id="myCanvas" style="width: calc(100vw - 200px);height: calc(100vh - 60px);" ref="myCanvas" @mousewheel='mousewheel' @mousedown="dragCanvas" @mousemove="mouseMove"></canvas> </template> <script> import request from '@/utils/request' import {getMinX, getMinY, getMaxX, getMaxY} from '@/assets/js/MapUtils'; import {drawPoints, drawCurves} from '@/assets/js/Bezier'; import { ElNotification } from 'element-plus' import { h } from 'vue'; var websocket; import { useMainStore } from '@/utils/store'; export default { data(){ return { mapData: {}, mapParam: {}, BezierParam: {}, image_1: {}, } }, components: { }, created(){ }, methods:{ sharedData() { const mainStore = useMainStore(); return mainStore.getSharedData; // 访问共享数据 }, showMap(){ var AGVWIDTH = 0.6; var AGVLENGTH = 1.7; var infos = this.mapData.infos; let myCanvas = this.$refs.myCanvas; var ctx = myCanvas.getContext('2d'); ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // 设置canvas的真实宽高 myCanvas.width = myCanvas.offsetWidth; myCanvas.height = myCanvas.offsetHeight; // this.image_1.width == myCanvas.offsetWidth; // this.image_1.height == myCanvas.offsetHeight; ctx.fillStyle = '#F1F3F4' ctx.fillRect(0, 0, myCanvas.width, myCanvas.height); /* For empty space */ var Width = (window.innerWidth) - 200; var Height = (window.innerHeight) - 60; var xOffset = ((this.mapParam.minX + this.mapParam.maxX) / 2.0) * this.mapParam.scale*this.mapParam.userScale - Width / 2.0 - this.mapParam.userMoveX; var yOffset = ((this.mapParam.minY + this.mapParam.maxY) / 2.0) * this.mapParam.scale*this.mapParam.userScale - Height / 2.0 - this.mapParam.userMoveY; var scale = this.mapParam.scale * this.mapParam.userScale; //ctx.translate(-Width, Height); //ctx.drawImage(this.image_1, Width-xOffset - 31.0*scale, yOffset - 19.05*scale, 60.0 * scale, 42.32 * scale); //ctx.translate(Width, -Height); ctx.font = "36px bold Arial"; ctx.fillStyle = "#C0C0C0"; ctx.textAlign = "left"; ctx.textBaseline = "middle"; //ctx.fillText("Dalian Auto Tech Inc.", myCanvas.width - 240, 50); //ctx.fillText("Total AGVs : " + infos.totalAgv, 50, 60); //ctx.fillText("Total Orders : " + infos.totalOrder, 50, 90); if((JSON.parse(JSON.stringify(this.sharedData()))).key == "zh-cn"){ ctx.fillText("MBEAM ZF 后车桥系列", 50, 60); }else if((JSON.parse(JSON.stringify(this.sharedData()))).key == "en"){ ctx.fillText("MBEAM ZF Rear Axle line", 50, 60); }else if((JSON.parse(JSON.stringify(this.sharedData()))).key == "esp"){ ctx.fillText("MBEAM Línea de eje trasero ZF", 50, 60); }else{ ctx.fillText("MBEAM ZF Rear Axle line", 50, 60); } // ctx.fillText("MBEAM ZF Rear Axle line", 50, 60); ctx.font = "18px bold Arial"; ctx.fillText("Dalian Auto Tech Inc.", myCanvas.width - 240, myCanvas.height - 50); drawCurves(this.mapParam.element, this.mapParam.objCurves, this.mapParam.objPnts, Height, "Black", 1, scale, xOffset, yOffset, this.mapData.regs); drawPoints(this.mapParam.element, this.mapParam.objPnts, Height, "#008B00", scale, xOffset, yOffset); if (this.mapParam.AgvInfoIn == true) { var jsonObj = this.mapData.agvs; var fontSize = scale*1.0; this.mapParam.flash = false; for(let i = 0; i < jsonObj.length; i++){ if(jsonObj[i].status.status != -1){ // console.log(jsonObj[i].status) var pntX = jsonObj[i].status.loc_x * scale - xOffset; var pntY = jsonObj[i].status.loc_y * scale - yOffset; var EventLevel = jsonObj[i].status.eventLevel; var EventId = jsonObj[i].status.eventId; ctx.translate(pntX, Height - pntY); ctx.rotate(-jsonObj[i].status.loc_heading); ctx.drawImage(this.mapParam.image, -AGVLENGTH * scale / 2.0, -AGVWIDTH * scale / 2.0, AGVLENGTH * scale, AGVWIDTH * scale); ctx.rotate(jsonObj[i].status.loc_heading); ctx.translate(-pntX, -Height + pntY); /* Point index */ var AgvIndex = jsonObj[i].index; //context.font = fontSize + "px bold Arial"; if(EventLevel == 2){ ctx.font = fontSize + "px bold Arial"; ctx.fillStyle = "Blue"; } else if(EventLevel == 1){ if(EventId == 11){ if(this.mapParam.flash){ ctx.font = fontSize*2.0 + "px bold Arial"; ctx.fillStyle = "Orange"; } else{ ctx.font = fontSize + "px bold Arial"; ctx.fillStyle = "Orange"; } } else{ ctx.font = fontSize + "px bold Arial"; ctx.fillStyle = "Orange"; } } else if(EventLevel == 0){ ctx.font = fontSize + "px bold Arial"; ctx.fillStyle = "Red"; } else{ ctx.font = fontSize + "px bold Arial"; ctx.fillStyle = "Green"; } ctx.textAlign = "center"; ctx.textBaseline = "middle"; var agvIndexXoffset = 20*scale/30; var agvIndexYoffset = 20*scale/30; ctx.fillText(AgvIndex + "", pntX + agvIndexXoffset, Height - pntY - agvIndexYoffset); } } ctx.translate(-Width, Height); ctx.globalAlpha = 0.3; ctx.drawImage(this.image_1, Width-xOffset - 30.07*scale, yOffset - 23.97*scale, 61.50 * scale, 43.52 * scale); ctx.translate(Width, -Height); this.mapParam.flash = !this.mapParam.flash; } }, display() { var objPnts = this.mapData.points; var objCurves = this.mapData.curves; var element = this.$refs.myCanvas; /* Set by parameters */ this.mapParam.element = element; this.mapParam.objPnts = objPnts; this.mapParam.objCurves = objCurves; /* For map size */ this.mapParam.minX = getMinX(this.mapParam.objPnts); this.mapParam.maxX = getMaxX(this.mapParam.objPnts); this.mapParam.minY = getMinY(this.mapParam.objPnts); this.mapParam.maxY = getMaxY(this.mapParam.objPnts); /* For scale */ var scale1 = ((window.innerWidth) - 200) / (this.mapParam.maxX - this.mapParam.minX); var scale2 = ((window.innerHeight) - 105) / (this.mapParam.maxY - this.mapParam.minY); this.mapParam.scale = scale1; if (scale2 < scale1) { this.mapParam.scale = scale2; } /* For user scale\motion */ this.mapParam.userScale = 0.95; this.mapParam.userMoveX = 0.0; this.mapParam.userMoveY = 0.0; this.showMap(); }, mousewheel(event){ if(event.wheelDelta > 0 && this.mapParam.userScale >= 0){ this.mapParam.userScale *= 1.1; //this.image_1.width *= 1.1; }else if(event.wheelDelta < 0 && this.mapParam.userScale > 0){ this.mapParam.userScale /= 1.1; //this.image_1.height /= 1.1; } this.showMap(); }, dragCanvas(event){ var e = event || window.event; var startX = e.clientX; var startY = e.clientY; var moved = false; let myCanvas = this.$refs.myCanvas; var that = this; if(event.button == 0){ var e = e || window.event; var startX = e.clientX; var startY = e.clientY; var moved = false; var userStartX = this.mapParam.userMoveX; var userStartY = this.mapParam.userMoveY; myCanvas.onmousemove = function(e) { that.mapParam.userMoveX = userStartX + (e.clientX - startX); that.mapParam.userMoveY = userStartY + (startY - e.clientY); that.showMap() }; myCanvas.onmouseup = function() { if (moved == false) { // e.clientX, e.clientY } myCanvas.onmouseup = null; myCanvas.onmousemove = null; }; } }, paintAgv() { this.mapParam.image = new Image(); this.mapParam.image.src = require('@/assets/image/g28-1.png') this.mapParam.AgvInfoIn = true; this.showMap(); this.loopStates(); }, loopStates() { var agvInfo = this.mapData.agvs var msg; msg = "<strong style='color: Orange'>" for(let item in agvInfo){ var eventId = agvInfo[item].status.eventId; var EventLevel = agvInfo[item].status.eventLevel; if( eventId != -1 && eventId != 255 && (EventLevel == 0 || EventLevel == 1)){ switch(eventId){ case 0: msg += 'AGV: ' + agvInfo[item].index + ' _ 急停按钮被按下<br/>'; break; case 1: msg += 'AGV: ' + agvInfo[item].index + ' _ 前安全触边被触发<br/>'; break; case 2: msg += 'AGV: ' + agvInfo[item].index + ' _ 后安全触边被触发<br/>'; break; case 3: msg += 'AGV: ' + agvInfo[item].index + ' _ 安全系统触发伺服掉电<br/>'; break; case 4: msg += 'AGV: ' + agvInfo[item].index + ' _ Canopen设备掉线<br/>'; break; case 5: msg += 'AGV: ' + agvInfo[item].index + ' _ 舵轮驱动器故障<br/>'; break; case 6: msg += 'AGV: ' + agvInfo[item].index + ' _ 扫描仪安全区被触发<br/>'; break; case 7: msg += 'AGV: ' + agvInfo[item].index + ' _ Error 7<br/>'; break; case 8: msg += 'AGV: ' + agvInfo[item].index + ' _ Error 8<br/>'; break; case 9: msg += 'AGV: ' + agvInfo[item].index + ' _ 地标信号检测失败<br/>'; break; case 10: msg += 'AGV: ' + agvInfo[item].index + ' _ 磁导航信号丢失<br/>'; break; case 11: msg += 'AGV: ' + agvInfo[item].index + ' _ 调度系统要求挂起<br/>'; break; case 12: msg += 'AGV: ' + agvInfo[item].index + ' _ 与调度系统通讯异常<br/>'; break; case 13: msg += 'AGV: ' + agvInfo[item].index + ' _ 用户操作停车<br/>'; break; case 14: msg += 'AGV: ' + agvInfo[item].index + ' _ Error 14<br/>'; break; case 15: msg += 'AGV: ' + agvInfo[item].index + ' _ 扫描仪停止区被触发<br/>'; break; case 16: msg += 'AGV: ' + agvInfo[item].index + ' _ Error 16<br/>'; break; case 17: //msg += 'AGV: ' + agvInfo[item].index + ' _ 调度系统要求agv休眠<br/>'; break; case 18: msg += 'AGV: ' + agvInfo[item].index + ' _ 扫描仪减速区被触发<br/>'; break; case 19: msg += 'AGV: ' + agvInfo[item].index + ' _ 行走误差过大<br/>'; break; case 20: msg += 'AGV: ' + agvInfo[item].index + ' _ 电池电量低<br/>'; break; case 21: msg += 'AGV: ' + agvInfo[item].index + ' _ Error 21<br/>'; break; case 22: msg += 'AGV: ' + agvInfo[item].index + ' _ Error 22<br/>'; break; case 1001: msg += 'AGV: ' + agvInfo[item].index + ' _ 货物RFID异常<br/>'; break; default: msg += 'AGV: ' + agvInfo[item].index + ' _ Error ' + eventId + '<br/>'; break; } } } msg += "</strong>" if(msg !== "<strong style='color: Orange'></strong>"){ this.showError1(msg) } }, showError1(str) { ElNotification({ showClose: false, title: 'Please Note', dangerouslyUseHTMLString: true, message: str, type: 'warning', offset: 50, duration: 1200, }) }, connectWebsocket() { if (typeof WebSocket === "undefined") { console.log("Your browser does not support WebSocket"); return; } else { let url = 'ws://localhost:9090/ws_main'; //let url = 'ws://localhost:9090/ws_main'; var that = this; this.websocket = new WebSocket(url); // websocket注释见AGV.vue定义 this.websocket.onopen = () => { console.log("websocket.onopen"); }; this.websocket.onmessage = evt => { this.mapData.agvs = JSON.parse(evt.data); //console.log(JSON.parse(evt.data)) // console.log(this.mapData.agvs[0]) var xTemp = 0.0; var jsonObj = this.mapData.agvs; for (var it in jsonObj){ xTemp = jsonObj[it].status.loc_x; jsonObj[it].status.loc_x = -jsonObj[it].status.loc_y; jsonObj[it].status.loc_y = xTemp; jsonObj[it].status.loc_heading = jsonObj[it].status.loc_heading + 1.5707; } this.paintAgv(); }; this.websocket.onerror = evt => { console.log("websocket error:", evt); }; this.websocket.onclose = evt => { console.log("websocket close:", evt); }; this.$router.beforeEach(function(){ that.websocket.close() }) } }, wsOnmessage(event){ console.log('onmessage' + event); }, }, created(){ this.connectWebsocket(); //console.log(sessionStorage.getItem('user')); }, mounted(){ request.get('/map/getMap').then(res => { this.mapData.points = JSON.parse(res.data[0]) this.mapData.curves = JSON.parse(res.data[1]) this.mapData.infos = JSON.parse(res.data[2]) //this.mapData.agvs = JSON.parse(res.data[3]) this.mapData.regs = JSON.parse(res.data[4]) //this.connectWebsocket() this.image_1 = new Image(); //this.image_1.src = require('@/assets/image/Layout.png') var jsonCurvesObj = eval(this.mapData.curves); var jsonPntsObj = -eval(this.mapData.points); var objRegs = this.mapData.regs; var xTemp = 0.0; for (var it in jsonPntsObj){ xTemp = jsonPntsObj[it].x; jsonPntsObj[it].x = -jsonPntsObj[it].y; jsonPntsObj[it].y = xTemp; jsonPntsObj[it].heading = jsonPntsObj[it].heading + 1.5707; } var xTemp = 0.0; for(let i = 0; i < objRegs.length; i++){ xTemp = objRegs[i].lB.x; objRegs[i].lB.x = -objRegs[i].lB.y; objRegs[i].lB.y = xTemp; xTemp = objRegs[i].rT.x; objRegs[i].rT.x = -objRegs[i].rT.y; objRegs[i].rT.y = xTemp; } this.display() //this.connectWebsocket() }) }, } </script> 地图通过var jsonPntsObj = -eval(this.mapData.points);这个已经横过来了,但是agv小车没有按照横过来的地图行走,怎么更改
最新发布
06-05
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值