2
ピクセルデータを作成してputImageDataを使用してキャンバスに配置するカスタムコードを使用して等値線を描画しようとしています。HTML5キャンバスputImageDataが期待した結果を得られないピクセルを混乱させるようです。
しかし、予想される結果が得られません。キャンバスの生のピクセルデータをすばやく見て、作成したすべてのピクセルデータが混乱しているようです。
私は以下のコードから欲しいものは黒い背景に赤いダイヤモンドです。どこが間違っていますか?
var Drawing = {};
Drawing.DrawIsoMetricSquare = function(cRenderContext, x, y, iWidth, cColor) {
var iHeight = iWidth/2;
var iYPos = Math.floor(iHeight/2) + 1;
var iXPos = 0;
var iRenderGirth = 1;
cPixelData = cRenderContext.createImageData(iWidth, iHeight);
var bExpand = true;
while (iXPos != iWidth) {
var iCurrentRenderGirth = 0;
while (iCurrentRenderGirth != iRenderGirth) {
var iY = iYPos + iCurrentRenderGirth;
//Draw first pixel then second
Drawing.ColorPixelAtPos(cPixelData.data, iXPos, iY, iWidth, cColor);
Drawing.ColorPixelAtPos(cPixelData.data, iXPos + 1, iY, iWidth, cColor);
iCurrentRenderGirth++;
}
//Move to next Render Start
iYPos = bExpand ? (iYPos - 1) : (iYPos + 1);
iXPos += 2;
iRenderGirth = bExpand ? (iRenderGirth + 2) : (iRenderGirth - 2);
bExpand &= iRenderGirth < iHeight;
}
cRenderContext.putImageData(cPixelData, x, y);
};
Drawing.XYPosToPixelPos = function(x, y, iWidth) {
return (x + y * iWidth) * 4;
};
Drawing.ColorPixelAtPos = function(cPixelData, x, y, iWidth, cColor) {
var iPixPos = Drawing.XYPosToPixelPos(x, y, iWidth);
cPixelData[iPixPos++] = cColor.r;
cPixelData[iPixPos++] = cColor.g;
cPixelData[iPixPos++] = cColor.b;
cPixelData[iPixPos] = 1; //Fixed alpha for now
};
var eCanvas = $("<canvas></canvas>");
eCanvas[0].width = 50;
eCanvas[0].height = 50;
$("#render").append(eCanvas);
var cRenderContext = eCanvas[0].getContext('2d');
cRenderContext.fillStyle = "rgba(1, 1, 1, 1)";
cRenderContext.fillRect(0, 0, 50, 50);
Drawing.DrawIsoMetricSquare(cRenderContext, 0, 0, 42, {
r: 255,
g: 0,
b: 0
});
JSFiddle例here
私はあなたの数学の問題を理解することができませんでしたが、赤を見るために、あなたは固定アルファを1でなく255にします。少なくとも、白い背景に赤いv型を得ています。 –
はどこが間違っているのですか?私はアルファが0と1の間にあると思った?または、ピクセルデータでは、css rgbaと比較して異なっていますか? – Tristan
私はまた、非常にバギーであり、私はそれをテストするために何も見ることができなかったように私が期待した形を生成していないことをイメージング – Tristan