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

【问题标题】：How to compute transform in HTML Canvas by coordinates如何通过坐标计算 HTML Canvas 中的变换
【发布时间】：2014-07-14 17:25:31
【问题描述】：

我有一个 HTML 格式的画布，其中包含我加载的图像。图像具有大小（宽度，高度）。我得到 2 个坐标 - (x1, y1) 和 (x2, y2) - 它们是目标变换的左上角和右上角。

我需要做的是获取原始图像，将其左上角放入 (x1, y1) 并对其进行转换，以便右上角位于 (x2,y2) - 我想这需要一个倾斜变换。

问题是如何计算右偏斜以将右上角准确地放在 (x2,y2) 中。将左上角放入 (x1,y1) 需要一个简单的平移变换 - 没有问题。

非常感谢，

请看附图：

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案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 );

【讨论】：

【解决方案2】：

您可以使用 MSpaint 获取 (X,Y) 的坐标，也可以使用此网站更轻松地参考 Image mapping generator

【讨论】：

谢谢，但我得到了 (X,Y) 坐标 - 我想知道如何从坐标中获取变换的偏斜。
为什么不使用 CSS3 ？ CSS3 skewing 很容易实现！
没关系——反正我需要计算偏斜。