Question

请协助我完成它，我需要免费的图像变换，我做了主要的逻辑但不确定如何完成它。图片必须在我的自定义选择中。

所以我只设置了左上角，但是对象没有其他x和y，例如x1，x2，x3，x4，y1，y2，y3，y4

image.setAttrs({ x: dashed.leftTop.attrs.x, y: dashed.leftTop.attrs.y });

我不确定如何设置必要的角落。还是有另一种方法可以完成它？

请帮助我使用倾斜吗？

https://jsfiddle.net/u9ck6b2q/

Answer 1

当前，2d canvas上下文没有本机方法来执行此操作。因此，您必须编写自己的转换逻辑（或使用外部库）。

以下几个演示可能对您有用：

http://tulrich.com/geekstuff/canvas/perspective.html http://www.html5.jp/test/perspective_canvas/demo1_en.html

我通过了您的演示，将其与第二个代码示例结合在一起：https://jsfiddle.net/u9ck6b2q/3/

op = new html5jp.perspective(canvas.getContext('2d'), imageObj);
image.image(canvas);

op && op.p.ctxd.clearRect(0, 0, 1000, 1000);
op && op.draw([
    [dashed.leftTop.attrs.x,
    dashed.leftTop.attrs.y],
    [dashed.rightTop.attrs.x,
    dashed.rightTop.attrs.y],
    [dashed.rightBottom.attrs.x,
    dashed.rightBottom.attrs.y],
    [dashed.leftBottom.attrs.x,
    dashed.leftBottom.attrs.y],
    [dashed.leftTop.attrs.x,
    dashed.leftTop.attrs.y]
  ]);

通过自由变换将图像附加到自定义区域

1 个答案: