Question

我使用HTML画布的方式与T恤编辑器类似，允许用户定位和调整图像大小。图像被绘制到画布上，如下所示：

var img = new Image();
img.crossOrigin='anonymous';
img.onload = function () {
    var ratio = img.width / img.height;

    imageWidth = canvas.width;
    imageHeight = imageWidth / ratio;
    imageY = (canvas.height-imageHeight)/2;
    if (imageHeight > canvas.height) {
        imageHeight = canvas.height;
        imageWidth = imageHeight * ratio;
        imageY = 0;
    }

    imageRight = imageX + imageWidth;
    imageBottom = imageY + imageHeight
    draw(true, false);
}

function draw(withAnchors, withBorders) {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.drawImage(img, 0, 0, img.width, img.height, imageX, imageY, imageWidth, imageHeight);

    if (withAnchors) {
        drawDragAnchor(imageX, imageY);
        drawDragAnchor(imageRight, imageY);
        drawDragAnchor(imageRight, imageBottom);
        drawDragAnchor(imageX, imageBottom);
    }

    if (withBorders) {
        ctx.beginPath();
        ctx.moveTo(imageX, imageY);
        ctx.lineTo(imageRight, imageY);
        ctx.lineTo(imageRight, imageBottom);
        ctx.lineTo(imageX, imageBottom);
        ctx.closePath();
        ctx.stroke();
    }

}

在我的主index.php文件中使用PHP设置绘制到画布上的实际图像，如下所示：

<script type="text/javascript"> img.src = <?php echo json_encode($image_url); ?>; </script>

画布的大小取决于产品，我会在用户更改产品时动态更改画布大小：

var changeCanvas = document.getElementById("editorCanvas");
canvas.width = 71;
canvas.height = 285;

我的问题是每当我改变画布的大小时，画在它上面的图像就会消失。然而，每当我点击或移动画布时，它就会再次出现。我想知道我做错了什么以及如何解决这个问题？

鼠标操作：

$("#editorCanvas").mousedown(function (e) {
    handleMouseDown(e);
});
$("#editorCanvas").mousemove(function (e) {
    handleMouseMove(e);
});
$("#editorCanvas").mouseup(function (e) {
    handleMouseUp(e);
});
$("#editorCanvas").mouseout(function (e) {
    handleMouseOut(e);
});

Answer 1

这是设计的。 standard states（我的重点）：

当用户代理将位图尺寸设置为宽度和高度时，   它必须执行以下步骤：

[...]


将划痕位图的大小调整为新的宽度和高度，然后将其清除为完全透明的黑色。

画布更改大小后，必须重新绘制所有内容。

您可能已经（虽然当前未显示）添加了触发重绘的鼠标事件侦听器。

使用绘图功能重绘图像的代码：draw(true, false);

更改画布删除图像

1 个答案: