2

実際に (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オブジェクトを渡すだけでは機能しません!

他の人と同じように締め切りがあるので、解決策を探し続けますが、助けていただければ幸いです!

4

2 に答える 2

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: 1 つの HTML ファイル ローカルで同じコードをテストして、同じアーティファクトを取得しました: http://pastebin.com/HiYgKnw0

于 2013-04-09T15:52:29.503 に答える