CanvasRenderingContext2D翻转转换

Question

我找到了this CanvasRenderingContext2D，我玩了一下。我能够使用这个上下文缩放和旋转我的图像：

class Type<T> {
    init?(array pArray: [T]) {
        guard !pArray.isEmpty else {
            return nil
        }

        // ...
    }

    init(value pValue: T) {
        // ...
    }
}

不幸的是我找不到任何垂直或水平翻转画布的功能。在代码中，我认为我可以做类似的事情：

crop: function () {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");

    canvas.width = this.options.width / this.scale;
    canvas.height = this.options.height / this.scale;

    var currWidth = this.imgWidth * this.scale;
    var currHeight = this.imgHeight * this.scale;
    var correctX = (currWidth - this.imgWidth) / 2;
    var correctY = (currHeight - this.imgHeight) / 2;
    var sourceX = (this.posX - correctX) / this.scale;
    var sourceY = (this.posY - correctY) / this.scale;

    context.translate(sourceX, sourceY);
    context.translate(this.imgWidth / 2, this.imgHeight / 2);
    context.rotate(this.rotate * Math.PI / 180);
    context.drawImage(this.imgFull, this.imgWidth / 2 * -1, this.imgHeight / 2 * -1);

    this.options.modal.remove();
    this.promise.resolve(canvas);
},

但我找不到任何在y轴或x轴上旋转的方法。 有什么方法可以在这里进行翻转转换吗？

Answer 1

通过CanvasRenderingContext2D

镜像图像

这是一个简单的效用函数，可以水平，垂直或同时镜像图像。

function mirrorImage(ctx, image, x = 0, y = 0, horizontal = false, vertical = false){
    ctx.save();  // save the current canvas state
    ctx.setTransform(
        horizontal ? -1 : 1, 0, // set the direction of x axis
        0, vertical ? -1 : 1,   // set the direction of y axis
        x + horizontal ? image.width : 0, // set the x origin
        y + vertical ? image.height : 0   // set the y origin
    );
    ctx.drawImage(image,0,0);
    ctx.restore(); // restore the state as it was when this function was called
}

用法

mirrorImage(ctx, image, 0, 0, true, false); // horizontal mirror
mirrorImage(ctx, image, 0, 0, false, true); // vertical mirror
mirrorImage(ctx, image, 0, 0, true, true);  // horizontal and vertical mirror

更多镜子

如果您希望能够沿任意一行进行镜像，请参阅答案Mirror along line

Answer 2

我不知道这是否是您正在寻找的，但您可以使用CSS反映图像。我在我的一个项目中有这个：

<style>
.image-reflect {
    transform: scaleX(-1);
}
</style>
.
.
.
<span class="fa fa-share-alt image-reflect"></span>

将FontAwesome share icon显示为“合并”图标。

实际上，如果你查找“CSS变换”，你会发现它可以旋转，缩放，移动，倾斜等。