2

我有一个像素图对象，每行包含一个列对象，其中包含颜色信息。然后我使用 选择颜色switch()，然后将其简单地绘制到画布上。这是代码：

  for(var pixX in pixmap) {
    for(var pixY in pixmap[pixX]) {
      switch(pixmap[pixX][pixY]) {
        case 1: var pixColor='lightgray'; break;
        case 2: var pixColor='black'; break;
        default: var pixColor='forestgreen'; break;
        }
      $('canvas#surface').drawRect({
        fillStyle: pixColor,
        width: 1, height: 1,
        x: pixX, y: pixY,
        fromCenter: false
        });
      }
    }

它绘制像素，但像素位置以某种方式缩放，尽管像素实际上只有 1px 大。我无法确定，它放大了多少。当我在画布上画了一段时间后，位置是正确的。有什么问题？

编辑：我在 jsFiddle 上重新创建了它：http: //jsfiddle.net/qyNTn/

4

1 回答 1

1

简单来说，pixXandpixY变量通过 JavaScript 转换为字符串。在将它们传递给 jCanvas 之前，您需要将它们转换为pixX数字。pixY

原因是因为 JavaScript 将每个键名（对于任何对象）存储为字符串。因此，当您使用循环遍历对象时for in，键名将始终是字符串。换句话说， pixX和pixY被视为字符串，因此您需要使用诸如parseFloat.

此外，jCanvas 在绘制形状时会执行许多数值计算，因此对于任何数值，它总是优先使用数字而不是字符串。

drawRect()无论如何，修复您的代码（以产生预期的行为）只需要对您的参数进行一次更改。

x: parseFloat(pixX), y: parseFloat(pixY),
于 2013-08-24T21:17:09.813 回答