1

私はkineticjsをいじっていて、単一のレイヤーで物を消去できるマウスツールを構築しようとしていました. 背景が白の場合、「消しゴム」効果を与えるために白い線を作成できることはわかっていますが、問題は、背景が画像であるため (背景画像が消去されない)、白い線を描画しても単に消去されないことです。マウス座標で線の一部を実際に消去できるようにする必要があります。これをやった人、または方法を知っている人はいますか

4

3 に答える 3

1

はい、KineticJS でフリーハンドの線を描くことも、フリーハンドの消しゴムを使用することもできます。

ただし、ソリューションはやや複雑です。

前提条件:

いじり回しているうちに、ユーザーがポリラインを「ドラッグアンドドロー」できるようにするために、マウスイベントをリッスンし、それらの mouseXY を保存する方法を学習したと思います。

ソリューション：

ソリューションには、カスタムの Kinetic.Shape を使用することが含まれます。これにより、事前定義された Kinetic オブジェクトよりも柔軟性が高くなります。

Kinetic.Shape は、操作する完全なキャンバス コンテキストを提供します。

context.moveToand multipleを使用context.lineToして、ユーザーがフリーハンドの線をドラッグして描画できるようにすることができます。

完全なコンテキストでは、合成も使用できます。

具体的には、描画された新しい線が消しゴムとして機能する「destination-out」合成を使用できます。

「destination-out」を使用すると、以前に描画された線は新しい線によって「消去」されます。

ソリューションの概要:

  • ユーザーがドラッグしながら個々のポイントをすべてキャプチャすることにより、キャンバス上でポリラインをドラッグして描画します。
  • その線をドラッグするときに、ユーザーが「描画」モードか「消去」モードかをキャプチャします。
  • カスタムの Kinetic.Shape を使用して線を描画するか、合成を使用して線を消去します。
  • 「描画」モードで、context.globalCompositeOperation=”source-over” を設定し、その線を描画します。
  • 「消去」モードで、context.globalCompositeOperation=”destination-out” を設定し、消しゴムをドラッグします。

複雑なことの 1 つは、Kinetic.Shape が提供するコンテキストが真のキャンバス コンテキストのラッパーであることです。

1 つの context.beginPath に制限され、context.beginPath ごとに 1 つの複合モードしか使用できません。複数の合成モード (描画と消しゴム) が必要なため、Kinetic.Shapes でラップされたコンテキストではなく、真のコンテキスト キャンバスを取得する方法を知る必要があります。

方法は次のとおりです。

var sketchpad = new Kinetic.Shape({

    drawFunc: function(context) {

        // get a true canvas context, not a "wrapped" context
        context=this.getContext()._context;

        // save the context state
        context.save();

        // then you can use multiple beginPath's 
        // and therefore have multiple composites.

        context.beginPath();
        context.globalCompositeOperation="source-over";
        // draw a polyline using your saved line-points
        context.stroke();

        context.beginPath();
        context.globalCompositeOperation="destination-out";
        // draw a polyline which acts like an eraser
        context.stroke();


        // restore the context state
        context.restore();

    },
    stroke: 'black',
    strokeWidth: 4
});
于 2013-10-08T15:21:42.803 に答える
0

「これをやった人はいますか？」

残念ながらありません。あなたが描いた線はオブジェクトです。オブジェクト全体として簡単に削除できます。

消しゴムのようなケースを使用したくない場合、線をいくつかの部分に分割するのは非常に困難です。

ただし、線がピクセルのグループである場合ははるかに簡単ですが、ピクセルのグループは線ではありません。

于 2013-10-08T09:41:02.883 に答える