0

こんにちは、アプリにhtml5とjavascriptを使用してWindowsストアアプリを構築しています。消しゴムツールを実装しようとしていますが、ユーザーが画像または別のレイヤーを以前に消去した場所に移動すると、白い描画が表示されるため、これには問題があります彼らが消したところ。たとえば、このコードのようにデフォルトのglobalCompositeOperationを「destination-out」に変更しました

          //Here is the error.
        if (clickTool[j] == "eraser") {
            ctx.globalCompositeOperation = 'destination-out';
            ctx.fillStyle = 'rgba(255,0,0,0.5);';
            ctx.strokeStyle = 'rgba(255,0,0,0.5);';

        }
        else {
            ctx.globalCompositeOperation = "source-over";
            ctx.strokeStyle = clickColor[j];
        }

残念ながら、私にはうまくいきません。すべてのコードをこのリンクにアップロードしました:

私のコード

誰かが私を助けてくれることを願っています。

ありがとう、私のスピーチでごめんなさい、私はメキシコ人です。

4

2 に答える 2

2

複数のレイヤーを使用します。背景画像用に 1 つのキャンバスを用意し、描画用に別のキャンバスを用意します。背景画像を決して消去しないのはそのためです。

通常、パフォーマンスに影響を与えないため、必要に応じて複数のレイヤーを使用できます。

そしてもちろん、レイヤーを組み合わせることができれば、描画が「永続的」であると思われる場合は、最後に描画された波線を背景レイヤーに伝えます。

于 2013-04-05T01:12:48.223 に答える
0

Maintain a array of mid points. Use the globalCompositeOperation as 'destination-out' first and 'source-over' later to make a transparent eraser trail .

Following is the code that you need to use with a mouse move function

var handleMouseMove = function (event) {
    midPt = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);

   if(curTool.type=="eraser"){

            var tempcanvas = document.getElementById('drawcanvas');
  var tempctx=tempcanvas.getContext("2d");
  tempctx.beginPath();
  tempctx.globalCompositeOperation = "destination-out";   
  tempctx.arc(midPt.x, midPt.y, 20, 0, Math.PI * 2, false);     
  tempctx.fill();
  tempctx.closePath();
  tempctx.globalCompositeOperation = "source-over";
  drawingCanvas.graphics.clear();

  // keep updating the array for points 
  arrMidPtx.push(midPt.x);
  arrMidPty.push(midPt.y);
  stage.addChild(drawingCanvas);
  stage.update();

    }        

  };

I use this code to make a eraser that behaves like pen and fills up transparent color instead of white

于 2015-02-28T09:55:21.477 に答える