0

私はこれにかなり初心者で、2つのレイヤーを作成しようとしています。私が固定画像として持っている最上層と下の画像はアップロードされたものです。一番下の画像を操作できるようにしたいです。からのコードを持っています

http://www.html5canvastutorials.com/labs/html5-canvas-scaling-a-drawing-with-plus-and-minus-buttons/#comment-19246

しかし、ボタンがアップロードされた画像に適用されるように変更することはできません。

これは私がhtml側に持っているもので、2つのレイヤーを作成し、固定画像を上にアップロードします: 

<input type="file" id="files" name="files[]" multiple onchange="handleFileSelect(this.files)"/>

        <div>
            <input type="button" id="plus" value="+"><input type="button" id="minus" value="-">
        </div>




<div id="canvasesdiv" style="position:relative; width:400px; height:300px">
<canvas id="layer2"
style="z-index: 1;
position:absolute;
left:0px;
top:0px;
" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

<canvas id="layer1"
style="z-index: 2;
position:absolute;
left:0px;
top:0px;
" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas></div>



<script type="text/javascript">
var c=document.getElementById("layer1");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src="assets/images/testsquare.png";
</script>

これは、変更のためにスクリプト側で持っているものです。

    <script>
        function draw(scale, translatePos){
            var canvas = document.getElementById("layer1");
            var context = canvas.getContext("2d");

            // clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

            context.save();

            context.restore();
        }

        window.onload = function(){
            var canvas = document.getElementById("layer1");

            var translatePos = {
                x: canvas.width / 2,
                y: canvas.height / 2
            };

            var scale = 1.0;
            var scaleMultiplier = 0.8;
            var startDragOffset = {};
            var mouseDown = false;

            // add button event listeners
            document.getElementById("plus").addEventListener("click", function(){
                scale /= scaleMultiplier;
                draw(scale, translatePos);
            }, false);

            document.getElementById("minus").addEventListener("click", function(){
                scale *= scaleMultiplier;
                draw(scale, translatePos);
            }, false);

            // add event listeners to handle screen drag
            canvas.addEventListener("mousedown", function(evt){
                mouseDown = true;
                startDragOffset.x = evt.clientX - translatePos.x;
                startDragOffset.y = evt.clientY - translatePos.y;
            });

            canvas.addEventListener("mouseup", function(evt){
                mouseDown = false;
            });

            canvas.addEventListener("mouseover", function(evt){
                mouseDown = false;
            });

            canvas.addEventListener("mouseout", function(evt){
                mouseDown = false;
            });

            canvas.addEventListener("mousemove", function(evt){
                if (mouseDown) {
                    translatePos.x = evt.clientX - startDragOffset.x;
                    translatePos.y = evt.clientY - startDragOffset.y;
                    draw(scale, translatePos);
                }
            });

            draw(scale, translatePos);
        };
    </script>

どんな助けでも大歓迎です

4

1 に答える 1

0

drawメソッドは現在、メソッドを使用して、 layer2document.getElementByIdキャンバスを取得して操作します。あなたの質問からは完全には明らかではありません（コードにメソッドを含めると役立つ場合があります）が、おそらくアップロードされた画像が描画されるレイヤー2キャンバスを取得するようにメソッド handleFileSelectを変更する必要があると思います：draw

function draw(scale, translatePos){

    // Get the layer2 canvas element in which the user uploaded image has been drawn 
    var canvas = document.getElementById("layer2");
    var context = canvas.getContext("2d");

    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.save();

    context.restore();
}
于 2012-07-19T00:15:22.003 に答える