canvas（11/30）--------事件处理（鼠标处理）精灵表坐标查看器

来源：互联网发布：社会工程学软件编辑：程序博客网时间：2024/06/06 02:15

鼠标处理

使用监听器，可以通过onmousemove，onmouseup，onmouseout或者onmousedown来注册监听器。

使用onmousedown，onmousemove这样的方式来注册监听器，比调用addEventListener（）要稍微简单一点，如果鼠标事件要注册多个监听器的时候，那就要使用addEventListener（）。

实现精灵表坐标查看器：

examp1.js

var canvas = document.getElementById('canvas'),readout = document.getElementById('readout'),context = canvas.getContext('2d'),spritesheet = new Image();//Functions//将鼠标坐标转换成canvas坐标function windowToCanvas(canvas,x,y) {var bbox = canvas.getBoundingClientRect();return {x:x - bbox.left * (canvas.width / bbox.width),y:y - bbox.top * (canvas.height / bbox.height)};}function drawBackground(){var VERTICAL_LINE_SPACING = 12;i = context.canvas.height;//清屏context.clearRect(0,0,canvas.width,canvas.height);context.strokeStyle = 'lightgray';context.lineWidth = 0.5;while(i > VERTICAL_LINE_SPACING*4){context.beginPath();//绘画从（0，i）绘制到（context.canvas.width,i）这条直线通过moveTo和lineTo函数进行绘画的context.moveTo(0,i);context.lineTo(context.canvas.width,i);context.stroke();i -=VERTICAL_LINE_SPACING;}}//绘画精灵表function drawSpritesheet(){//drawImage(图片，x，y)context.drawImage(spritesheet,0,0);}function drawGuidelines(x,y){context.strokeStyle = 'rgba(0,0,230,0.8)';context.lineWidth = 0.5;drawVerticalLine(x);drawHorizontalLine(y);}//坐标的显示function updateReadout(x,y) {//toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。readout.innerText = '(' + x.toFixed(0) + ',' +  y.toFixed(0) +')';}//绘制水平线function drawHorizontalLine(y) {context.beginPath();context.moveTo(0,y+0.5);context.lineTo(context.canvas.width,y+0.5);context.stroke();}//绘制垂直线function drawVerticalLine(x) {context.beginPath();context.moveTo(x+0.5,0);context.lineTo(x+0.5,context.canvas.height);context.stroke();}//鼠标移动的位置canvas.onmousemove = function (e) {var loc = windowToCanvas(canvas,e.clientX,e.clientY);drawBackground();drawSpritesheet();drawGuidelines(loc.x,loc.y);updateReadout(loc.x,loc.y);}//导入图片spritesheet.src = 'a.png';spritesheet.onload = function(e){drawSpritesheet();}//绘画drawBackground();

html：

<html><head><title>sprite sheets</title><style>body {background: #dddddd;}# canvas {position: absolute;left: 0px;top: 20px;margin: 20px;background: #ffffff;border: thin inset rgba(100,150,230,0.5);cursor:pointer;}#readout {margin-top: 10px;margin-left: 15px;color: blue;}</style></head><body><div id="readout"></div><canvas id="canvas" width="500" height="250">canvas not supported</canvas><script src='example1.js'></script></body></html>

还需要一张图片：a.png

阅读全文

0 0