0

我有一张尺寸为 400 x 500 的纸。我正在尝试使用以下代码将其划分为 20 x 20 像素 

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. 结果是一个 DIV，里面有一个 SVG 元素，后面有一个背景图像。浏览器（如果它支持 SVG的话）会将它们呈现在彼此之上。你想提取像素值吗？如果是这样，您必须通过 HTML5 Canvas 而不是 SVG 来执行此操作。

  2. 对不起，我不明白。你想达到什么目的？您想要 20x20 正方形的像素数据吗？使用拉斐尔，您只是在图片上画线。

  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 回答