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

Question

在我的代码中，我将图像加载到 canvas 元素。然后我需要对其进行拖动、调整大小、旋转和倾斜。我设法实现了拖动和调整大小。如何在此代码上使用鼠标实现倾斜？我读了一篇关于这个主题的有用文章 (http://www.subshell.com/en/subshell/blog/image-manipulation-html5-canvas102.html). I found fabricjs plugin, but it work only one image and without drag. For example: http://fabricjs.com/matrix-transformation/ 。如果您将使用转换功能：

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

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

我的代码：

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();
}

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

Skew the drawing horizontally and vertically in html5 canvas using mouse

javascript

canvas

html5-canvas