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

Question

在我的代码中，我将图像加载到画布元素。然后我需要拖动、调整大小、旋转和倾斜它。我设法实现了拖动和调整大小。如何在此代码上使用鼠标实现倾斜？我读了一篇关于这个主题的有用文章 (http://www.subshell.com/en/subshell/blog/image-manipulation-html5-canvas102.html)。我找到了fabricjs插件，但它只工作一张图片，没有拖拽。例如：http://fabricjs.com/matrix-transformation/。 如果您将使用转换功能：

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

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

我的代码：

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

Answer 1

这是一个更新的fiddle，允许您在单击其中一个角手柄时按 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();
}