Question

我需要在一个画布上有几张图片。我的函数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();
            });
        }

Answer 1

context.save和context.restore仅适用于上下文的状态（transformation，globalAlpha，...），但不适用于内部呈现的内容。

当您清除上下文时，它会将其清空。

你要做的是：

捕捉鼠标事件并更改位置变量
清除画布
重新绘制新位置的所有图片

Answer 2

save（），restore（）根本不处理位图数据：）。

要拖动周围的东西，基本上你需要有一个不包含你正在绘制的元素的屏幕外画布，并且在每次更新后绘制屏幕外画布和被拖动的元素。

使用已经完成它的库可能更简单，大多数情况下都可以，例如http://www.html5canvastutorials.com/labs/html5-canvas-interactive-scatter-plot-with-20000-nodes-using-kineticjs/

Answer 3

画布是一个平面对象 - 一旦你将图像绘制到它上面，图像就没有更多的上下文，因为它作为画布的一部分呈现。您可以创建一个矩形对象数组及其坐标，以跟踪画布上已有的内容或测试背景颜色的鼠标位置，以确定是否有图像。然后，您可以通过清除画布并再次重新绘制所有其他项目来删除事件发生的项目。

希望这有帮助！

在画布上重绘图像

3 个答案: