程序清单1-5 精灵表坐标查看器的HTML代码
<!DOCTYPE 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='example.js'></script>
</body>
</html>
程序清单1-6 精灵表坐标查看器的JavaScript代码
var canvas = document.getElementById('canvas'),
readout = document.getElementById('readout'),
context = canvas.getContext('2d'),
spritesheet = new Image();
//Functions..........................................................
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();
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
context.stroke();
i -= VERTICAL_LINE_SPACING;
}
}
function drawSpritesheet() {
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) {
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();
ICP经营许可证：鄂B2-20080078
（于2003年首获许可证:鄂B2－20030029）
鄂公网安备：420100003343号
© 2002-2025 武汉制信科技有限公司 版权所有
投诉举报电话：027-87592219
购买
在线阅读
需求中心
AI助手
联系我们
返回顶部