如何扭曲这样的图像 [英] how to skew image like this

问题描述

我想扭曲这样的图像我需要为context.setTransform设置什么参数？

二维变换允许你将图像向上或向下倾斜，通过将第二个参数中的偏斜角的正切传递给 setTransform（），但是您要以对称方式执行（导致向近和/ 远变形）。

但是，你可以通过将图像切分成几个水平带并在渲染每个图像时应用不同的变换来模拟相同的结果带。从图像的一半开始的带将被施加更强的扭斜角。例如：

  var width = image.width，
 height = image.height，
 context = $（canvas）[0] .getContext（2d）; 
 for（var i = 0; i <= height / 2; ++ i）{
 context.setTransform（1，-0.4 * i / height，0,1,0,60） 
 context.drawImage（image，
 0，height / 2  -  i，width，2，
 0，height / 2  -  i，width，2）; 
 context.setTransform（1，0.4 * i / height，0，1，0，60）; 
 context.drawImage（image，
 0，height / 2 + i，width，2，
 0，height / 2 + i，width，2）; 
} 
  

请注意，乐队是两个像素高，而不是一个，以避免莫尔效应。

您可以在这个小提琴中看到结果。

I want to skew an image like this what params I need to set for context.setTransform?

解决方案

You cannot achieve this with a single 2D transform.

A 2D transform allows you to skew the image "upwards" or "downwards" by passing the tangent of the skew angle in the second argument to setTransform(), but you want to perform both in a symmetrical manner (resulting in a "nearwards" and/or "farwards" deformation). You need a 3D transform to do that.

However, you can emulate the same result by slicing the image into several horizontal "bands" and applying a different transform when rendering each band. Bands further from the half of the image will be applied stronger skew angles. Something like:

var width = image.width,
    height = image.height,
    context = $("canvas")[0].getContext("2d");
for (var i = 0; i <= height / 2; ++i) {
    context.setTransform(1, -0.4 * i / height, 0, 1, 0, 60);
    context.drawImage(image,
        0, height / 2 - i, width, 2,
        0, height / 2 - i, width, 2);
    context.setTransform(1, 0.4 * i / height, 0, 1, 0, 60);
    context.drawImage(image,
        0, height / 2 + i, width, 2,
        0, height / 2 + i, width, 2);
}

Note the bands are two pixels high instead of one to avoid a moire effect.

You can see the results in this fiddle.

这篇关于如何扭曲这样的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！