Question

我浪费了我2天的时间在Google上搜索我的问题，但没有得到任何线索。实际上我有工作代码在画布上绘制圆形，方形，线上鼠标向下和向上事件（此图形在画布上动态绘制）。现在我想要随机放大包含此图形的画布。

当我尝试这个时，我开始知道......在缩放画布之后需要重新绘制图形。有没有办法以简单的方式做到这一点？

画布中是否有任何方法可以保留与绘制的数字相关的所有信息？

我可以在缩放后以相应比例绘制这些数字吗？

请帮助我...任何线索或任何帮助我进一步工作的代码片段。感谢您的帮助.....

我有以下代码片段，其中包含一条曲线，在zoom时一次又一次地调用。但这个图是静态的，所以每次坐标都是相同的。但在我的情况下，数字坐标随着数字的变化而变化。

function draw(scale, translatePos){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

                // clear canvas
                context.clearRect(0, 0, canvas.width, canvas.height);

                context.save();
                context.translate(translatePos.x, translatePos.y);
                context.scale(scale, scale);
                context.beginPath(); // begin custom shape
                context.moveTo(-119, -20);

                context.bezierCurveTo(-159, 0, -159, 50, -59, 50);
                context.bezierCurveTo(-89, -95, -139, -80, -119, -20);

        context.closePath(); // complete custom shape
                context.fill();
                context.stroke();
                context.restore();
            }

Answer 1

还有一个参数当你想放大时，再次放大绘图功能并再次调用绘图功能。传递你要缩放多少的值，例如2x并乘以所有值，例如对于2x，将所有值乘以2。

Answer 2

我不清楚你在问什么。我想这就是你要问的。

在使用画布的应用程序中，用户可以使用鼠标绘制正方形，圆形和线条等图形。用户在画布上绘制了一个正方形和一个圆圈。用户应该能够重新调整正方形的大小，使其变大或变小，而不会改变圆的大小。用户应该能够将方块重新设置为其原始大小。这可能只是使用Canvas对象的属性和方法吗？

这是你要问的吗？

如果没有尝试描述您希望应用程序的用户能够做什么。

Answer 3

画布只是像素，而绘图方法只是设置这些像素的颜色。

如果你想正确重新缩放基本形状，你必须记住你绘制的形状，并在调整大小时从头开始重绘。

如果可以，请使用画布的变换矩阵支持来处理缩放 - 这样可以避免自己重新计算任何坐标。

包含动态数字的Canvas HTML 5 zoom

3 个答案: