Question

canvas.onmousemove = function (e) {
if (isDown === true) {
    var pos = getMousePos(canvas, e);
    var x = pos.x;
    var y = pos.y;

    //translate difference from now and start
    element.translate(x - startX, y - startY);
    drawImage();

    //update start positions for next loop
    startX = x;
    startY = y;
}}

http://jsfiddle.net/braziel/nWyDE/

朋友们，我需要帮助来限制缩放时画布内图像的移动。

我放了链接，你可以在缩放时看到图像并拖动它超出图像的极限。

图像必须始终保持在画布内，并且永远不会移动更多。

全部谢谢！

Answer 1

第一步是跟踪图像的绝对位置。为此我在全球范围内添加了这个：

var ix=0, iy=0;

接下来，在mousemove事件中，我们计算新职位与旧职位之间的差异：

var dx = x - startX;
var dy = y - startY;

然后我们需要找到缩放图像和画布之间的差异。由于画布不知道它是缩放的（有点 - 我们使用的坐标一如既往地以1：1为单位），我们需要与画布的缩放大小进行比较。由于我们跟踪当前的比例，我们只是乘以那些作为因子，减去图像维度并将所有内容除以2以使其居中：

var diffX = (canvas.width * currentScale - image.width) / 2;
var diffY = (canvas.height * currentScale - image.height) / 2;

现在我们可以检查我们的边界 - 如果在外面我们将delta值重置为0，那么就不会翻译任何内容：

if (ix + dx < -diffX ||
    ix + dx + image.width > canvas.width * currentScale - diffX) dx = 0;

if (iy + dy < -diffY ||
    iy + dy + image.height > canvas.height * currentScale - diffY) dy = 0;

最后我们用我们的delta值更新translate：

ix += dx; //image position
iy += dy;
element.translate(dx, dy);

如果外部边界没有任何改变，那么delta将为0，在这种情况下，每个轴都是分开的。如上所述，我们使用坐标，就好像没有任何内容被缩放和旋转，因为画布只是项目我们对翻译矩阵的所有内容。因此，我们不需要担心轮换。

此处生成的演示：

的 Modified fiddle

此外 - 由于我们在移动图像时遇到风险而鼠标光标位于画布外，因此鼠标向上事件将永远不会在画布中注册。因此我们会倾听窗口，所以我们确定（除非是在小提琴中的iframe）我们可以重置移动：

window.onmouseup = function (e) { isDown = false; }

HTML5将移动图像限制为画布

1 个答案: