1

http://deepschool.kd.io/Pages/Experiments/draw.htm

これは私が取り組んでいる画像エディターですが、バグがあります。15 倍ズームの画像を作成したとします。ズームを変更すると、画像が失われます。どうしてこれなの？そして救済策は何ですか？

HTML:

Zoom:
<input type="number" id="zoom" min="1" max="50" onchange="zoomy()">

JS:

var zoomy = function() {
    var zoomamount = zoom.value
    var canvassize = zoomamount * 16
    c.width = canvassize
    c.height = canvassize
};

前もって感謝します

4

1 に答える 1

3

キャンバスにズームインする場合は、ズームで再描画する必要があることを意味します。

したがって、純粋なピクセルで構成されているキャンバスにクリックしてピクセルを描画する代わりに...まず、ピクセルのグリッドの表現を作成する必要があります。

var gridOfPixels = [];

今のところ、静的サイズで問題ないとしましょう。8x8 ピクセルにします。最初に、配列を初期化します。

for (var i=0; i < 8*8; i++) gridOfPixels[i] = 0;

これで、グリッド キャンバスの準備ができたので、描画する必要があります。

function renderGrid() {
    for (var y=0; y < 8; y++)
        for (var x=0; x < 8; x++)
            renderPixel( x, y, gridOfPixels[x+y*8] );
}

renderPixel の方法は既に知っています - 四角形の位置 (posX = x*pixWidth、posY*pixHeight) を計算します。ここで、pixWidth は canvasWidth/8 などです。色の 3 番目のパラメーターを使用して、すべてのピクセルを描画します。

最後に、onclick を接続してピクセルをグリッドに配置し、renderGrid を呼び出してユーザーに変更を表示する必要があります。

$('#my-canvas').click(function(e) {
    var x = ...;
    var y = ...;  // calculate the position of pixels from mouse position inside canvas
    // dont forget to check that x,y are in the 0-7 range
    // dont forget to convert x,y to whole number using parseInt()
    gridOfPixels[x+y*8] = 1;
    renderGrid();  // update the grid canvas
});

これで、キャンバスのサイズを変更したり、いくつかの変数を変更したりするたびに、元のキャンバスのコンテンツがグリッドに保存され、必要なときにいつでも renderGrid() を実行できます。ピクセルの色をアニメーション化するなど、リアルタイムで行うこともできます.

楽しむ。:)

于 2013-09-07T13:08:23.967 に答える