如何像这样倾斜图像 [英] how to skew image like this

问题描述

我想倾斜这样的图像 我需要为 context.setTransform 设置什么参数?

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

推荐答案

您无法通过单个 2D 变换实现这一点.

You cannot achieve this with a single 2D transform.

2D 变换允许您通过将第二个参数中的倾斜角度的切线传递给 setTransform() 来向上"或向下"倾斜图像，但您希望同时在对称的方式(导致近"和/或远"变形).您需要进行 3D 变换才能做到这一点.

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.

你可以在这个小提琴中看到结果.

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