我有一个带有一些不规则形状图形的画布,当有人点击特定的图形时,我想要得到反馈?
我已经到处寻找解决方案,但只找到了矩形的解决方案。
我认为这可能与isPointInPath()有关,但我还没有找到如何使用它的简明说明。
欢迎任何帮助。
我有一个带有一些不规则形状图形的画布,当有人点击特定的图形时,我想要得到反馈?
我已经到处寻找解决方案,但只找到了矩形的解决方案。
我认为这可能与isPointInPath()有关,但我还没有找到如何使用它的简明说明。
欢迎任何帮助。
我写了一个教程,使用第二个不可见的画布来进行对象选择/命中测试。将所有形状逐个绘制在第二个画布上,直到鼠标位置出现黑色像素为止,然后就找到了你要的对象!
以下是我写的有关使用canvas选择对象的一些内容:
// gctx is ghost context, made from the second canvas
// clear(gctx)
// ...
// run through all the boxes
var l = boxes.length;
for (var i = l-1; i >= 0; i--) {
// draw shape onto ghost context
drawshape(gctx, boxes[i], 'black', 'black');
// get image data at the mouse x,y pixel
var imageData = gctx.getImageData(mx, my, 1, 1);
var index = (mx + my * imageData.width) * 4;
// if the mouse pixel exists, select and break
if (imageData.data[3] > 0) {
mySel = boxes[i];
offsetx = mx - mySel.x;
offsety = my - mySel.y;
mySel.x = mx - offsetx;
mySel.y = my - offsety;
isDrag = true;
canvas.onmousemove = myMove;
invalidate();
clear(gctx);
return;
}
}
我的完整演示只使用矩形,但在后续版本中我将使用圆形/路径/文本。
如果您想查看演示和我的完整代码,请点击此处。
这可以通过使用Path2D来实现。
var div = document.getElementById("result");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var path1 = new Path2D();
path1.rect(10, 10, 100, 100);
path1.closePath();
ctx.stroke(path1);
var path2 = new Path2D();
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);
path2.closePath();
ctx.stroke(path2);
var path3 = new Path2D("M230 10 h 80 v 80 h -80 Z");
ctx.fill(path3);
path3.closePath();
$('canvas').click( function(event)
{
div.innerHTML = "";
var x = event.pageX;
var y = event.pageY;
if (ctx.isPointInPath(path1, x, y))
div.innerHTML = "Path1 clicked";
if (ctx.isPointInPath(path2, x, y))
div.innerHTML = "Path2 clicked";
if (ctx.isPointInPath(path3, x, y))
div.innerHTML = "Path3 clicked";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<canvas id="canvas"></canvas>
<div id="result"></div>
</body>
isPointInPath
函数完成,但您必须保存制作每个路径所需的所有步骤,并在每次需要测试时加载上下文的当前路径。 - Simon Sarris