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] );
}

您已经知道如何渲染像素 - 计算矩形位置 (posX = x*pixWidth, posY*pixHeight)，其中 pixWidth 为 canvasWidth/8 等。现在您绘制所有像素，使用颜色的第三个参数。

要完成，您必须连接 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 回答