Question

我需要一些指针来上传图像，然后提供拖动图像的能力，使其在另一个图像形状中适合所需。这就是我到目前为止所拥有的：

http://goehints.com/public/＆lt; - 上传任何图片点击提交后，我可以使用顶部图像进行选择和裁剪 - 但我想在十六进制形状内直接调整大小/重新定位。有什么建议吗？

我相信所有代码都可以从源代码查看，如果不是，请告诉我，谢谢！

Answer 1

您可以使用画布及其“剪辑”操作：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = document.createElement("img");
var imgpos = { x:0, y:0, scale: 1.0 };

function redraw() {
    canvas.width = canvas.width;
    ctx.strokeStyle = "#000";
    ctx.lineWidth = 4;
    ctx.beginPath();
    for (var i=0; i<6; i++) {
        var t = 2*Math.PI*(i+0.5)/6;
        var x = 200 + 200*Math.cos(t);
        var y = 200 + 200*Math.sin(t);
        if (i == 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.save();
    ctx.clip();
    ctx.translate(imgpos.x, imgpos.y);
    ctx.scale(imgpos.scale, imgpos.scale);
    ctx.drawImage(img, 0, 0);
    ctx.restore();
    ctx.stroke();
    ctx.fillStyle = "#F00";
}

我基本上将剪裁的图像绘制成六边形，然后我也绘制了六边形边框。在应用平移/缩放转换后也会绘制图像。

这使您可以在页面中动态进行所有缩放/裁剪，而无需在服务器端执行任何操作：

img.onload = redraw;
img.src = "cube.jpg";

var tracking = null;
canvas.onmousedown = function(event){
    event.preventDefault(); event.stopPropagation();
    var x = event.x, y = event.y;
    canvas.onmousemove = function(event) {
        event.preventDefault(); event.stopPropagation();
        imgpos.x += event.x - x;
        imgpos.y += event.y - y;
        x = event.x; y = event.y;
        redraw();
    };
    canvas.onmouseup = function() {
        canvas.onmouseup = canvas.onmousemove = null;
    };
};
canvas.onmousewheel = function(event) {
    var d = event.wheelDelta;
    while (d >= 120) {
        imgpos.scale *= 1.1;
        d -= 120;
    }
    while (d <= -120) {
        imgpos.scale /= 1.1;
        d += 120;
    }
    redraw();
};

您可以看到它正常工作here。

在一个框内重新定位图像

1 个答案: