调整画布元素/形状的大小

Question

我基本上正在创建一个小脚本，它允许您上传图像，用黄色框标记图像上的某个位置，然后保存图像。我为此使用 HTML5 画布。我已经准备好所有东西，上传图像并添加形状，但现在我已经知道要上传的各种尺寸的图像，我需要能够调整“形状”（黄色矩形）的大小。我有一个滑块，当它们沿着滑块掉落到某处时，它会输出 2 个数字（宽度和高度）。这会调用 onSizeChange：

    function onSizeChange(x2,y2) {
        context.clearRect(<?php echo $xcoord;?>, <?php echo $ycoord;?>, 30, 30);
        context.beginPath();
        context.rect(<?php echo $xcoord;?>, <?php echo $ycoord;?>, x2, y2);
        context.fillStyle = 'yellow';
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = 'black';
        context.stroke();
}

这种具有预期的效果，但它也删除了背景图像的块（不仅仅是黄色矩形），而且它只会从 30,30 调整大小（这是它清除的位，并且是原始的自动矩形大小）。

我正在努力做到这一点，我什至尝试清除整个画布并从头开始重新绘制，但即使遇到问题，任何帮助都将不胜感激！

Answer 1

您可以使用基于任意大小的初始黄色框大小。然后在加载图像时，使用此任意大小来创建比例因子。

例如：

// lets say the yellow box' size is relative to:
var bWidth = 800,         // our "calibration" size.
    bHeight = 600,
    initialWidth = 50,    // size of yellow box relative
    initialHeight = 50;   // to "calibration" size.

加载图像并计算缩放因子：

var scaleX = image.width / bWidth;
var scaleY = image.height / bHeight;

现在只需将 scaleX/Y 与初始框大小相乘：

var newWidth = initialWidth * scaleX;
var newHeight = initialHeight * scaleY;