HTML5 Canvas无法正确映射 [英] HTML5 Canvas not mapping correctly
本文介绍了HTML5 Canvas无法正确映射的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法为自己解决这个问题.我正处于创建基于Web的时间表的初期阶段.我正在尝试创建一个时间网格，您可以在其中单击并拖动以选择所需的时间范围.我建立了一个模型，但是由于某种原因，映射不匹配.如果我单击一个框，则必须在最左侧才能选择该框.我使用了((ev._x)-(ev._x％10)""来解决这个问题，但是似乎并没有解决这个问题.任何帮助将不胜感激.
<pre lang="xml"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML 5 Test Page</title>
<script type="text/javascript">
function load() {
var canvas, context, tool, staticy, staticx, temp;
init();
function init() {
// Find the canvas element.
canvas = document.getElementById(''c'');
if (!canvas) {
alert(''Error: I cannot find the canvas element!'');
return;
}
if (!canvas.getContext) {
alert(''Error: no canvas.getContext!'');
return;
}
// Get the 2D canvas context.
context = canvas.getContext(''2d'');
if (!context) {
alert(''Error: failed to getContext!'');
return;
}
// Pencil tool instance.
tool = new tool_pencil();
// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener(''mousedown'', ev_canvas, false);
canvas.addEventListener(''mousemove'', ev_canvas, false);
canvas.addEventListener(''mouseup'', ev_canvas, false);
drawGrid();
}
function drawGrid() {
context.beginPath();
for (var i = 0.5; i < 501; i += 50) {
for (var x = 0.5; x <= 961; x += 10) {
context.moveTo(x, i);
context.lineTo(x, i + 40);
}
}
for (var y = 0.5; y < 500; y += 50) {
context.moveTo(0, y);
context.lineTo(961, y);
context.moveTo(0, y + 40);
context.lineTo(961, y + 40);
}
context.strokeStyle = "#000";
context.stroke();
}
// This painting tool works like a drawing pencil which tracks the mouse
// movements.
function tool_pencil() {
var tool = this;
this.started = false;
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
context.beginPath();
staticy = ev._y - (ev._y % 50);
staticx = (ev._x) - (ev._x % 10);
tool.started = true;
};
// This function is called every time you move the mouse.
this.mousemove = function (ev) {
//future code
};
// This is called when you release the mouse button.
this.mouseup = function (ev) {
if (tool.started) {
context.fillStyle = "red";
//context.fillRect(startx, starty, width, height)
context.fillRect(staticx, staticy, (ev._x - (ev._x % 10)) - staticx, 40);
context.stroke();
tool.started = false;
}
};
}
// The general-purpose event handler. This function just determines the mouse
// position relative to the canvas element.
function ev_canvas(ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
}
</script>
</head>
<body onload="load()">
<canvas id="c" width="961" height="500"></canvas>
</body>
</html>
/edit-我仅在最新版本的Chrome上进行过测试.不过我发现了，显然您必须将画布位置设为相对位置:
<canvas id="c" width="961" height="500" style="position:relative;">
I cannot for the life of me figure this out. I''m in the early stages of creating a web based timesheet. I''m trying to create a time grid where you can just click and drag to select the desired time frame. I have a mockup built, but for some reason the mappings are not matching up. If I click in a box, it has to be on the far left to select that box. I used "(ev._x) - (ev._x % 10)" to account for this, but it does not seem to do the trick. Any help would be much appreciated.
<pre lang="xml"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML 5 Test Page</title>
<script type="text/javascript">
function load() {
var canvas, context, tool, staticy, staticx, temp;
init();
function init() {
// Find the canvas element.
canvas = document.getElementById(''c'');
if (!canvas) {
alert(''Error: I cannot find the canvas element!'');
return;
}
if (!canvas.getContext) {
alert(''Error: no canvas.getContext!'');
return;
}
// Get the 2D canvas context.
context = canvas.getContext(''2d'');
if (!context) {
alert(''Error: failed to getContext!'');
return;
}
// Pencil tool instance.
tool = new tool_pencil();
// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener(''mousedown'', ev_canvas, false);
canvas.addEventListener(''mousemove'', ev_canvas, false);
canvas.addEventListener(''mouseup'', ev_canvas, false);
drawGrid();
}
function drawGrid() {
context.beginPath();
for (var i = 0.5; i < 501; i += 50) {
for (var x = 0.5; x <= 961; x += 10) {
context.moveTo(x, i);
context.lineTo(x, i + 40);
}
}
for (var y = 0.5; y < 500; y += 50) {
context.moveTo(0, y);
context.lineTo(961, y);
context.moveTo(0, y + 40);
context.lineTo(961, y + 40);
}
context.strokeStyle = "#000";
context.stroke();
}
// This painting tool works like a drawing pencil which tracks the mouse
// movements.
function tool_pencil() {
var tool = this;
this.started = false;
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
context.beginPath();
staticy = ev._y - (ev._y % 50);
staticx = (ev._x) - (ev._x % 10);
tool.started = true;
};
// This function is called every time you move the mouse.
this.mousemove = function (ev) {
//future code
};
// This is called when you release the mouse button.
this.mouseup = function (ev) {
if (tool.started) {
context.fillStyle = "red";
//context.fillRect(startx, starty, width, height)
context.fillRect(staticx, staticy, (ev._x - (ev._x % 10)) - staticx, 40);
context.stroke();
tool.started = false;
}
};
}
// The general-purpose event handler. This function just determines the mouse
// position relative to the canvas element.
function ev_canvas(ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
}
</script>
</head>
<body onload="load()">
<canvas id="c" width="961" height="500"></canvas>
</body>
</html>
/edit - I''ve only tested on the most recent version of Chrome
解决方案
When you click and drag on the grid, it fills in the blocks. I figured it out though, apparently you have to make the canvas position relative:
<canvas id="c" width="961" height="500" style="position:relative;">
这篇关于HTML5 Canvas无法正确映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
