如何通过坐标计算HTML Canvas中的变换

Question

我有一个带有我加载的图像的HTML画布。图像的大小（宽度，高度）。我得到2个坐标 - （x1，y1）和（x2，y2） - 这些是目标变换的左上角和右上角。

我需要做的是拍摄原始图像，将其左上角放入（x1，y1）并对其进行转换，使得右上角位于（x2，y2） - 我想这需要一个倾斜变换。

问题是如何计算右倾斜将右上角准确地放在（x2，y2）中。 将左上角放在（x1，y1）中需要一个简单的转换变换 - 没有问题。

非常感谢，

请参阅附图：

Answer 1

您必须使用setTransform才能扭曲图像。

ctx.setTransform ( scaleX, skewX, skewY, scaleY, transX, transY ) ;

你想改变skewX，所以当x = =到宽度时，y由targetSkew改变，所以：

skewX =  targetSkew / width 

http://jsbin.com/kivoraqa/1/edit?js,output

function fillRectSkewed(x,y,w,h,sk) {
  ctx.save();
   var skewRatio=sk/w;
   ctx.setTransform(1,skewRatio,0,1, x,y);
   ctx.fillRect(0, 0, w,h);
  ctx.restore();
  }

fillRectSkewed(40,40, 80,40, 20);

在您的情况下，请调用fillRectSkewed（x1，y2，imageWidth，imageHeight，y1-y2）;

Answer 2

您可以使用MSpaint获取（X，Y）的坐标，或者您可以使用此网站更容易参考 Image mapping generator