Question

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

提前致谢

Answer 1

如果你想放大画布，这意味着你必须用缩放重绘。

所以不要直接点击画布上的像素，而是用纯像素制作的画布......你需要先创建一些像素网格的表示。

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（）。你甚至可以实时地做，动画像素的颜色等。

玩得开心。：）

通过js缩放到画布会导致内容丢失？

1 个答案: