实际上(使用w3.org doc的示例http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#dom-context-2d-ispointinpath)我确实弄清楚了如何在原始HTML5Canvas/JavaScript中完成:http://jsfiddle.net/QTu9E/4/
上面我使用了isPointInPath(x, y)
语法,但是根据提到的文档,也有isPointInPath(path, x, y[, w ])
,其中可以给出特定的路径来检查。
这一个可以解决问题,但我不能得到它的工作只是通过paperjs的Path
对象到它!
尝试onMouseEnter
和onMouseLeave
事件并更改paperjs容器html dom元素的css样式。
http://paperjs.org/reference/item/onmouseenter
yourPath.onMouseEnter = function (event) {
paperCanvasContainerDiv.style.cursor = "pointer";
}
yourPath.onMouseLeave = function (event) {
paperCanvasContainerDiv.style.cursor = "default";
}
好的,这就是答案!
http://jsfiddle.net/fqaJM/<canvas id="myCanvas" width="256" height="128"></canvas>
<div id="xycoordinates"></div>
,
#myCanvas {
border: 1px solid #c3c3c3;
}
#xycoordinates {
font: 9pt sans-serif;
}
,
var canvas = document.getElementById("myCanvas"); // Get canvas
// Some initialisation stuff to make things work out of PaperScript context
// Have to have things to be done this way because jsfiddle don't allow to save source with script type="text/paperscript"
paper.install(window);
paper.setup(canvas);
var myPath = new paper.Path.Circle([64, 64], 32); // Red one, with 'pointer' cursor on it
myPath.style = {
fillColor: '#FF0000'
};
var scndPath = new paper.Path.Circle([192, 64], 32); // Green one, without cursor accent
scndPath.style = {
fillColor: '#00FF00'
};
paper.view.draw(); // Have to call manually when working from JavaScript directly
var hitOptions = { // Trigger hit only on 'fill' part of the path with 0 tolerance
segments: false,
stroke: false,
fill: true,
tolerance: 0
};
var tool = new paper.Tool(); // Again manually. Life is much easier with script type="text/paperscript"
tool.onMouseMove = function (event) { // Installig paperjs event
var x = event.point.x;
var y = event.point.y;
document.getElementById("xycoordinates").innerHTML = "Coordinates: (" + x + "," + y + ")";
var hitResult = myPath.hitTest(event.point, hitOptions); // isPointInPath
if (hitResult) {
document.body.style.cursor = "pointer";
} else {
document.body.style.cursor = "default";
}
};
关键是我错过了paperjs有自己的onMouseMove
和hitTest()
,这是isPointInPath()
包装。
不知道怎么回事,因为我已经在项目中使用它了!也许你需要休息一下%)
无论如何,仍然有一些问题:看起来hitTest()
引发了一些奇怪的假阳性,有时它不会触发它应该触发的地方。查看坐标为(46,96)和(77,64)的点!
UPD:刚刚在一个HTML文件本地测试了相同的代码,以获得相同的工件:http://pastebin.com/HiYgKnw0