0

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

3 回答 3

1

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

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

你要做的是：

  • 捕捉鼠标事件并改变位置变量
  • 清除画布
  • 在新位置重绘所有图像
于 2013-03-12T10:32:45.110 回答
0

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

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

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

于 2013-03-12T21:49:32.497 回答
0

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

希望这可以帮助！

于 2018-06-14T06:32:39.467 回答