0

私は400x500のサイズの紙を持っています。私はこれを以下のコードで20x20ピクセルに分割しようとしています 

var dpH = 500, dpW = 400, drawPad = new Raphael(document.getElementById('p'),
        dpW, dpH);
for ( var i = 0; i <= dpH / 20; i++) {
    drawPad.path("M" + 1 + " " + ((i * 20) + 1) + "L" + dpW + " "
            + ((i * 20) + 1));
}
for ( var j = 0; j <= (dpW / 20); j++) {
    drawPad.path("M" + ((j * 20) + 1) + " " + 1 + "L" + ((j * 20) + 1) + " "
            + dpH);
}

そしてHTMLマークアップは以下のようなものです 

<div id="p" style="background-image:url(image.png)"> </div>

背景画像と同じ高さと幅で。

私の当初の要件は、image.pngをRapheal紙として作成することでした。しかし、私はそれをすることができませんでした。そこで、DIV＃Pの背景画像として作成しました。次に、DIvをPaperに変換しました。
上記に関連する私の質問は次のとおりです

  1. Background-ImageとDIVのすべてのピクセルが一致していますか？
  2. 私が上で行った方法は、紙全体を20x20ピクセルの分割に分類することです。それは正しいやり方ですか？
  3. 描かれた線の幅はどれくらいですか？

これについて私を助けてください。

4

1 に答える 1

3

わかりました、それで私があなたを正しく理解していれば; 本当に必要なのは、画像の20x20の正方形の生の画像データを取得することです。

Canvas（ jsFiddleでも）を使用して画像データを抽出する方法は次のとおりです。

var dpH = 500,
    dpW = 400,
    ctx = document.getElementById('p').getContext('2d'),
    exportData = function() {
        var data;
        for (var y=0, yl=dpH/20; y<yl; y++) {
            for (var x=0, xl=dpW/20; x<xl; x++) {
                imgData = ctx.getImageData(x*20, y*20, 20, 20).data;
                console.log("Image data for " + x*20 + ", " + y*20, imgData);
                // data is an array with 4 values pr pixel
                // Top left pixel in the 20x20 square
                r = imgData[0]; // red
                g = imgData[1]; // green
                b = imgData[2]; // blue
                a = imgData[3]; // alpha
                console.log("RGBa of " + x*20 + ", " + y*20 + ": ", r, g, b, a);
            }
        }
    },
    drawImage = function() {
        ctx.drawImage(this, 0, 0);
        exportData(this);
    };

var img = new Image();
img.onload = drawImage;
img.src = "image.png"; // has to be on the same domain

**元の回答**

  1. 結果は、内部にSVG要素があり、その背後に背景画像があるDIVです。ブラウザ（SVGをサポートしている場合）は、それらを互いに重ねてレンダリングします。ピクセル値を抽出しますか？その場合は、SVGではなくHTML5Canvasを使用してこれを行う必要があります。

  2. すみません、わかりません。何を達成しようとしていますか？20x20の正方形のピクセルデータが必要ですか？Raphaelを使用すると、画像の上に線を引くだけです。

  3. パスのデフォルトは1ピクセルです。パスに属性を設定することで、これを変更できます。例（jsfiddle.netにもあります）：

var dpH = 500,
    dpW = 400,
    drawPad = Raphael(document.getElementById('p'), dpW, dpH),
    style = {
        "stroke"       : "#fff", // white
        "stroke-width" : 2 // default 1
    };

for ( var i = 0; i <= dpH / 20; i++) {
    drawPad.path("M" + 1 + " " + ((i * 20) + 1) + "L" + dpW + " "
            + ((i * 20) + 1)).attr(style);
}
for ( var j = 0; j <= (dpW / 20); j++) {
    drawPad.path("M" + ((j * 20) + 1) + " " + 1 + "L" + ((j * 20) + 1) + " "
            + dpH).attr(style);
}​
于 2012-06-11T15:34:51.650 に答える