0

1つのキャンバスにいくつかの画像が必要です。関数clear（）に問題があります。これは、キャンバス上で画像をドラッグする必要がある場合に使用されます。

問題は、Canvasが最後の画像にのみ表示されることです。context.save（）とcontext.restore（）を使おうとしましたが、私の場合は役に立ちませんでした。

    switch(i)
    {
    case 0:
    challengerImg = new Image();
    challengerImg.onload = function(){
        drawImage(this,x,y,i);
    };
    challengerImg.src = "<?php echo $base_url; ?>/themes/bartik/images/sheep.png";
    break;

    case 1:
    tshirt = new Image();
    tshirt.onload = function(){
        drawImage(this,x,y,i);
    };
    tshirt.src = "<?php echo $base_url; ?>/themes/bartik/images/tshirt.png";
    break;
    }

そして、キャンバスに描く機能：

           function drawImage(challengerImg,x,y,i){
            console.log("Function drawImage start");
            var events = new Events("layer0");
            var canvas = events.getCanvas();
            var context = events.getContext();
            var rectX = x;
            var rectY = y;

            var draggingRect = false;
            var draggingRectOffsetX = 0;
            var draggingRectOffsetY = 0;

             events.setStage(function(){
                var mousePos = this.getMousePos();

                if (draggingRect) {
                    rectX = mousePos.x - draggingRectOffsetX;
                    rectY = mousePos.y - draggingRectOffsetY;
                }

                this.clear(); //Here is trouble
                this.beginRegion();

                context.drawImage(challengerImg, rectX, rectY, challengerImg.width, challengerImg.height);

                // draw rectangular region for image
                context.beginPath();
                context.rect(rectX, rectY, challengerImg.width, challengerImg.height);
                context.closePath();

                this.addRegionEventListener("mousedown", function(){
                    draggingRect = true;
                    var mousePos = events.getMousePos();
                    draggingRectOffsetX = mousePos.x - rectX;
                    draggingRectOffsetY = mousePos.y - rectY;

                });
                this.addRegionEventListener("mouseup", function(){
                    draggingRect = false;
                });
                this.addRegionEventListener("mouseover", function(){
                    document.body.style.cursor = "pointer";
                });
                this.addRegionEventListener("mouseout", function(){
                    document.body.style.cursor = "default";
                });

                this.closeRegion();
            });
        }
4

3 に答える 3

1

context.saveとcontext.restoreは、コンテキストの状態（transformation、globalAlpha、...）に対してのみ機能し、内部でレンダリングされるものに対しては機能しません。

コンテキストをクリアすると、コンテキストが空になります。

あなたがしなければならないことは：

  • マウスイベントをキャッチし、位置変数を変更します
  • キャンバスをクリアする
  • すべての画像を新しい位置に再描画します
于 2013-03-12T10:32:45.110 に答える
0

save（）、restore（）はビットマップデータをまったく処理しません:)。

ものをドラッグするには、基本的に、描画している要素を含まないオフスクリーンキャンバスを用意する必要があります。更新するたびに、オフスクリーンキャンバスとドラッグする要素を描画します。

http://www.html5canvastutorials.com/labs/html5-canvas-interactive-scatter-plot-with-20000-nodes-using-kineticjs/のように、すでに実行しているライブラリを使用する方がおそらく簡単です。

于 2013-03-12T21:49:32.497 に答える
0

キャンバスはフラットオブジェクトです。画像を描画すると、キャンバスの一部としてレンダリングされるため、画像にはコンテキストがなくなります。座標を使用して長方形オブジェクトの配列を作成して、キャンバス上に既にあるものを追跡するか、マウスの位置で背景色をテストして、画像があるかどうかを判断できます。次に、キャンバスをクリアして他のすべてのアイテムを再描画することにより、イベントが発生したアイテムを削除できます。

お役に立てれば！

于 2018-06-14T06:32:39.467 に答える