0

ストローク幅が2のドラッグ可能な線があり、ユーザーがクリックして周囲の領域の近くをドラッグしても、線をドラッグできるようにしたいと考えています。私の理解によると、それを行う方法は、ラインのカスタムdrawHitFuncを定義することです。http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/のチュートリアルのコードを適応させて、行のカスタムdrawHitFuncを定義しました。

私のカスタムドローヒット機能はシンプルです。同じ線ですが、はるかに太い（25ピクセル幅）。ただし、これは機能していないようです。ドラッグは、マウスポインタをライン上に注意深く置いてからドラッグした場合にのみ機能します。以下に定義されているdrawHitFuncに基づいて、線の近くをクリックしてドラッグしても機能するはずです。私は何が間違っているのですか？

drawHitFuncスニペットは次のとおりです。

function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.lineWidth = 25;
context.moveTo(this.getPoints()[0].x, this.getPoints()[0].y);
context.lineTo(this.getPoints()[1].x, this.getPoints()[1].y);
context.closePath();
canvas.fillStroke(this);
}

完全に失敗した例は次のとおりです：http：//jsfiddle.net/BwF6K/

私が逃したことを指摘する助けはありがたいです。

ありがとう。

4

3 に答える 3

2

Line オブジェクトのヒット領域として実際に線を使用できます。これは、次の 2 つの方法で実現できます。

  1. 線の内部 colorKey を strokeStyle として割り当て、ネイティブのキャンバス ストロークを使用します。

    context.lineWidth = 10; context.strokeStyle = this.colorKey; context.stroke();

  2. もう 1 つの解決策は、fillStroke を呼び出す前に strokeWidth を設定してから、元に戻すことです。

    this.setStrokeWidth(10); canvas.fillStroke(これ); this.setStrokeWidth(3);

于 2013-07-19T12:53:37.930 に答える
0

はい、KineticJSはカスタムのヒットテストを好まないようです。

代わりに、これは機能します…カスタムヒットテストで「太い」線を使用するのではなく、線の周りに長方形を描くだけです。

コードとフィドルは次のとおりです：http： //jsfiddle.net/m1erickson/twUqx/

  var line = new Kinetic.Line({
        points: [fromX, fromY, toX, toY],
        stroke: drawColor,
        strokeWidth: 2,
        name: 'line',
        draggable:true,
        drawHitFunc: function(canvas) {
          var x1=this.getPoints()[0].x;
          var y1=this.getPoints()[0].y;
          var x2=this.getPoints()[1].x;
          var y2=this.getPoints()[1].y;
          var context = canvas.getContext();
          context.beginPath();
          context.lineWidth = 25;
          context.moveTo(x1-12,y1-12);
          context.lineTo(x2+12,y1-12);
          context.lineTo(x2+12,y2+12);
          context.lineTo(x1-12,y2+12);
          context.closePath();
          canvas.fillStroke(this);
        }
    });

回転した線の三角関数を計算する気がしなかったので、水平線を引いたことに注意してください=）

于 2013-03-01T21:33:34.983 に答える