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;

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

1 个答案: