私はキャンバスに描画して保存できる場所に取り組んでいるipad webappを持っています。より基本的なペイントプログラムのように。私は背景にアップロードしてイメージし、それを描くことができる必要があります。今私は描画機能を持っているので、それほど難しいことではないだろうし、背景にイメージを印刷して描画するのは難しくありません。私が抱えている問題は、管理可能なレイヤーが必要であるということです。つまり、アルファピクセルをサポートする必要があります。JSキャンバス - アルファで画像データを入れますか？
私が行ったことは、ペイントが呼び出されたときに子パネルを下に移動し、バッファされたイメージを一時イメージにペイントするパネルクラスを作成したことです。それから私はそれを取って親に塗りつぶします。イメージが一時的なイメージに平らになるまで続けます。
これはうまく動作します。特にデスクトップでは問題ありません。しかし、これを達成するためには、ピクセルの配列をループしてアルファを考慮に入れてペイントするスクラッチからputImageDataコードを書く必要がありました。同様に
var offset = (canvasW*4*y)+x*4;
for(var r = 0; r < newHeight; r++)
{
var lineOffset = (size.width*4 - columns)*r + offset;
for(var c = 0; c < columns; c+=4)
{
var start = (r*columns)+c;
var destStart = start+lineOffset;
var red = imageData[start];
var green = imageData[start+1];
var blue = imageData[start+2];
var alpha = imageData[start+3];
var destRed = canvasData[destStart];
var destGreen = canvasData[destStart+1];
var destBlue = canvasData[destStart+2];
var destAlpha = canvasData[destStart+3];
var opacity = alpha/255;
var destOpacity = destAlpha/255;
var invOpacity = 1-opacity;
var newRed = Math.abs(red - ((red-destRed)*invOpacity));
var newGreen = Math.abs(green - ((green-destGreen)*invOpacity));
var newBlue = Math.abs(blue - ((blue-destBlue)*invOpacity));
canvasData[start+lineOffset] = newRed;
canvasData[start+lineOffset+1] = newGreen;
canvasData[start+lineOffset+2] = newBlue;
canvasData[start+lineOffset+3] = 255;
}
}
これはレイヤーあたり約50ミリ秒かかる。デスクトップにはあまり適していません。 ipadの無駄な1200ミリ秒かかる！だから私は元のputImageData（アルファをサポートしていません）でテストしましたが、まだそれほど印象的ではありませんでしたが、私が思っている最高のものです。
ここに私の問題があります。私はキャンバスで描画するためのオーバーオール不透明度があることを知っていますが、いくつかのピクセルを完全に不透明にし、いくつかを完全に透明に描画できる必要があります。不透明度を含むputImageDataはありますか？
私はこれをどのように達成できるかについての推奨事項はありませんか？
2つのキャンバスを重ね合わせて使用し、下のキャンバスの不透明度を0.5とすると考えましたか？ –