0

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

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

画布中是否有任何方法可以维护与绘制的图形相关的所有信息？

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

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

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

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();
            }
4

3 回答 3

0

再有一个参数 Zoom in draw 函数并在您想要放大时再次调用 draw 函数。传递您想要放大多少的值，例如 2x 并根据例如 2x 乘以所有值，将所有值乘以 2。

于 2013-01-30T11:53:03.643 回答
0

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

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

这是你要问的吗？

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

于 2013-01-31T13:59:22.113 回答
0

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

如果您想正确地重新调整原始形状，您必须记住您绘制的形状，并在调整大小时从头开始重新绘制它们。

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

于 2013-01-31T14:02:09.940 回答