2

实际上（使用 w3.org 文档的示例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对象传递给它！

我将继续寻找解决方案，因为与其他任何人一样，我有我的最后期限，但任何帮助将不胜感激！

4

2 回答 2

5

尝试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";
}
于 2019-01-30T06:58:33.280 回答
4

好的，这就是答案！

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 有它自己的onMouseMoveand hitTest()，它是isPointInPath()包装器。

不知道它是怎么发生的，因为我已经在项目中使用它了！也许需要休息 %)

无论如何，仍然存在一些问题：它看起来hitTest()会引发一些奇怪的误报，有时它不会在它应该触发的地方触发。使用 (46,96) 和 (77,64) 坐标检查点！

UPD：刚刚在一个本地 HTML 文件中测试了相同的代码以获得相同的工件： http: //pastebin.com/HiYgKnw0

于 2013-04-09T15:52:29.503 回答