使用自由变换将图像附加到自定义区域

Question

请帮助我完成它，我需要自由图像转换，我已经完成了主要逻辑但不知道如何完成它。图片必须在我的自定义选择范围内。

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

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

我不确定如何设置必要的角。或者有其他方法可以完成吗？

请帮我一起使用skew？

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]
  ]);

使用自由变换将图像附加到自定义区域

Attach image to custom area with a free transform

konvajs