GWT:缩放画布绘图

3

我希望可以在画布上进行缩放,并且对重新绘制的对象进行缩放,以便在最大和最小缩放级别下获得清晰视图。

我参考了这里的方法来实现它,因此我已经将我的画布传递给了ScalableImage构造函数而不是Image,然后按照所有步骤进行操作。
我在"mainDraw"方法中重新绘制对象,但是没有获得正确的结果。我知道我缺少重新绘制画布的新比例和平移因子,但不知道如何设置。我在画布上绘制多个对象,例如弧形、矩形等等...因此性能是主要问题。

我设置了 context.translate(0, canvasHeight); 和 context.scale(1, -1);以从左下角开始建立坐标系统。(根据需求)

以下是一个包含一个对象的示例代码,我将这个画布传递给了ScalableImage构造函数,并在"mainDraw"中再次调用它。

int canvasHeight = 600;
int canvasWidth = 600;

Canvas canvas = Canvas.createIfSupported();
Context2d context = pcbCanvas.getContext2d();
canvas.setWidth("600");
canvas.setHeight("600");

canvas.setCoordinateSpaceHeight(canvasHeight);
canvas.setCoordinateSpaceWidth(canvasWidth);

context.translate(0, canvasHeight);
context.scale(1, -1);

context.beginPath();
context.rect(x, y, width, height); 
context.closePath();
context.fill();

RootPanel.get("canvasContainer").add(canvas);

有任何参考或想法吗? 谢谢。
1个回答

3

如果您在我的示例中使用后台环境,则应允许您缩放画布。您还可以修改构造函数,以便接受另一个画布小部件而不是图像。这可能是最佳解决方案。

在mainDraw()中,您可以修改backContext以添加您的画布小部件,而不是图像。


感谢您的关注。实际上,我已经尝试了您指示我要做的事情。但是需求有点不同,我完全忘记在问题中提到了。对此我深表歉意。您可以查看编辑后的问题,请给出建议,以便我可以进入下一步。 - Priyank

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接