更改鼠标光标，而悬停在与Paper.js

其实具体帆布路径（使用w3.org文档的例子http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#dom-context-2d-ispointinpath）我也想通了，它如何能在原HTML5Canvas完成/ JavaScript的：http://jsfiddle.net/QTu9E/4/更改鼠标光标，而悬停在与Paper.js

上面我用isPointInPath(x, y)语法，但根据提到的文档，还有isPointInPath(path, x, y[, w ])其中某些路径可以给予检查。

这一个可能是问题解决者，但我不能让它工作只是将paperjs的Path对象加入它！

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

来源

2013-04-09 jevgenij

什么是你想不工作？代码会很有帮助！ – Stanley 2013-04-09 00:43:45

好的，这里是答案！

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() wrapp呃。

不知道它是如何发生的，因为我已经在项目中使用它了！ Perhabs需要休息一下）

而且任何方式，仍然有一些问题：它看起来像hitTest()引发一些奇怪的误报，sontimes它不会触发它应该在哪里。用（46,96）和（77,64）坐标检出点！

UPD：刚刚测试在一个HTML文件localy相同的代码来获得相同的工件：http://pastebin.com/HiYgKnw0

来源

2013-04-09 15:52:29 jevgenij

更改鼠标光标，而悬停在与Paper.js

回答

相关问题