javascript - CamanJS の復元と回転の修正

Question

CamanJS で回転プラグインを使用する場合、変更を元に戻そうとすると問題が発生します。Caman は、画像をトリミングまたはサイズ変更するときに適切に機能する方法でのみ実装されますが、回転するときはそうではありません. 元に戻して画像を回転すると、キャンバスが回転してサイズが変更されたことを考慮していないため、画像が歪んでリロードされます。また、キャンバスの imageData.data も異なります。それで、彼がサイズ変更をどのように実装したかを見て、私はそれを修正したと思います。基本的に私がしたこと（そして彼もそうです）は次のとおりです。

初期状態でキャンバスを作成する
彼の pixelData を initialState から更新します
新しいキャンバスを作成する
最初の画像で彼を回転させます
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 - CamanJS の復元と回転の修正

1 に答える 1

Related

Reference