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方法当前使用 usingdocument.getElementById方法来检索 layer2 画布并对其进行操作。您的问题并不完全清楚（在您的代码中包含该handleFileSelect方法可能会有所帮助），但我认为您需要更改该draw方法，以便它检索 layer2 画布，这大概是上传图像被绘制到的那个： 

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 回答