CamanJS 还原和旋转修复答案

【问题标题】：CamanJS revert and rotate fixCamanJS 还原和旋转修复
【发布时间】：2014-04-26 22:15:17
【问题描述】：

如果您在 CamanJS 中使用旋转插件，则在您尝试还原更改时会出现问题。 Caman 仅在裁剪或调整图像大小时有效，但在旋转时无效。当您还原并旋转图像时，图像会重新加载扭曲，因为它没有考虑到画布已经旋转并改变了大小。现在画布的 imageData.data 也不同了。所以我想我通过查看他如何实现调整大小来解决它。基本上我所做的（他也是）是：

在初始状态下创建画布
从初始状态更新他的 pixelData
创建一个新画布
用初始图像旋转他
获取 ImageData 并重新渲染它们

所以我添加了什么。我需要知道图像旋转了多少角度，以便在旋转新画布时获得正确的 imageData（步骤 4）。

this.angle=0; //added it in the constructor

我还在构造函数中添加了一个新的布尔值来告诉我画布是否旋转

this.rotated = false;

在旋转插件中：

Caman.Plugin.register("rotate", function(degrees) {
    //....
    //....
    //....
    this.angle += degrees;
    this.rotated = true;
    return this.replaceCanvas(canvas);
}

在原始的VisiblePixels 原型上：

else if (this.rotated){
    canvas = document.createElement('canvas');//Canvas for initial state
    canvas.width = this.originalWidth; //give it the original width
    canvas.height = this.originalHeight; //and original height
    ctx = canvas.getContext('2d');
    imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    pixelData = imageData.data;//get the pixelData (length equal to those of initial canvas      
    _ref = this.originalPixelData; //use it as a reference array
    for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
        pixel = _ref[i];
        pixelData[i] = pixel; //give pixelData the initial pixels
    }
    ctx.putImageData(imageData, 0, 0); //put it back on our canvas
    rotatedCanvas = document.createElement('canvas'); //canvas to rotate from initial
    rotatedCtx = rotatedCanvas.getContext('2d');
    rotatedCanvas.width = this.canvas.width;//Our canvas was already rotated so it has been replaced. Caman's canvas attribute is allready rotated, So use that width
    rotatedCanvas.height = this.canvas.height; //the same
    x = rotatedCanvas.width / 2; //for translating
    y = rotatedCanvas.width / 2; //same
    rotatedCtx.save();
    rotatedCtx.translate(x, y);
    rotatedCtx.rotate(this.angle * Math.PI / 180); //rotation based on the total angle
    rotatedCtx.drawImage(canvas, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height); //put the image back on canvas
    rotatedCtx.restore(); //restore it
    pixelData = rotatedCtx.getImageData(0, 0, rotatedCanvas.width, rotatedCanvas.height).data; //get the pixelData back       
    width = rotatedCanvas.width; //used for returning the pixels in revert function               
}

您还需要在重置原型函数中添加一些重置。基本上是重置角度和旋转

Caman.prototype.reset = function() {
    //....
    //....
    this.angle = 0;
    this.rotated = false;
}

就是这样。

我使用它并且工作至今。你怎么看？希望对你有帮助

【问题讨论】：

标签： javascript canvas rotation camanjs

【解决方案1】：

谢谢你，稍作改动后它就可以工作了。

在我更改的 originalVisiblePixels 原型中的 else if 语句中：

x = rotatedCanvas.width / 2; //for translating
y = rotatedCanvas.width / 2; //same

到：

x = rotatedCanvas.width / 2; //for translating
y = rotatedCanvas.height/ 2; //same

在此之前更改我的图像被剪切的位置。

【讨论】：