使用鼠标在html5画布中水平和垂直倾斜图形

Question

在我的代码中，我正在将图像加载到canvas元素。 然后，我需要对其进行拖动，调整大小，旋转和倾斜 。 我设法实现了拖动和调整大小。 如何在此代码上使用鼠标实现偏斜？ 我阅读了有关此主题的有用文章（ http://www.subshel​​l.com/en/subshel​​l/blog/image-manipulation-html5-canvas102.html ）。 我找到了fabricjs插件，但是它只能工作一张图像，并且没有拖动。 例如： http : //fabricjs.com/matrix-transformation/ 。 如果您将使用转换功能：

ctx.transform(1, 0.5, -0.5, 1.2, 30, 60);

这将转换分配给canvas元素的所有图像对象。 我只想要所选的图像。

我的代码：

https://jsfiddle.net/sjLnqk5d/2/

Answer 1

这是一个更新的小提琴 ，可让您在单击其中一个角柄时按Shift键分别倾斜任何图像。 您可能需要对其进行一些微调，以使运动看起来更加直观。

诀窍确实是在ctx.transform()调用周围使用了ctx.save()和ctx.restore() ，这确保了转换（以及其他任何属性更改）仅在save和restore之间适用。

以下是主要更改：

Shape.prototype.draw ：

...
var skewX = this.skewX;
var skewY = this.skewY;
imgNew.onload = function(){ 
    ctx.save();
    ctx.transform(1, skewX/100, skewY/100, 1, 0, 0);
    ctx.drawImage(imgNew, locx, locy, width, height);
    ctx.restore();
}