Question

我想在画布上使用 重绘对象 进行放大和缩小，以便在最大和最小缩放级别获得清晰的视图。

我可以参考如何做到here因此我已经将我的画布传递给了 ScalableImage 构造函数而不是Image，并且遵循了所有步骤。
我正在重新绘制＆＃34; mainDraw＆＃34; 方法中的对象，但没有得到正确的结果。我知道我错过了重新绘制画布的新比例和翻译因素，但不知道如何设置它。我在画布上绘制了多个对象，如arc，rect等......因此性能是主要关注点。

我已经设置了 context.translate（0，canvasHeight）;和context.scale（1，-1）; 从左下角开始坐标系。（根据要求）

下面是一个包含一个对象的示例代码，我将这个画布传递给 ScalableImage 构造函数，并在＆＃34; mainDraw＆＃34; 中再次调用它。

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

任何参考或任何想法？
谢谢

Answer 1

如果你在我的例子中使用后台上下文，它应该允许你缩放画布。您也可以修改构造函数以获取另一个画布小部件而不是图像。这可能是最好的解决方案。

在mainDraw（）中，您可以修改backContext以添加画布小部件而不是图像。

GWT：放大和缩小画布图

1 个答案: