Question

我非常喜欢这个，我正在尝试创建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>

非常感谢任何帮助

Answer 1

您的draw方法当前使用document.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();
}

HTML5 Canvas上载图像缩放/缩放与按钮编码

1 个答案: