在画布上重绘图像答案

【问题标题】：Redraw images on canvas在画布上重绘图像
【发布时间】：2018-06-14 14:32:39
【问题描述】：

我需要在一个画布上放置几张图片。我在使用 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();
            });
        }

【问题讨论】：

标签： javascript jquery html canvas

【解决方案1】：

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

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

你要做的是：

捕捉鼠标事件并改变位置变量
清除画布
在新位置重绘所有图像

【讨论】：

【解决方案2】：

save(), restore() 根本不处理位图数据:)。

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

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

【讨论】：

【解决方案3】：

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

希望这会有所帮助！

【讨论】：