问题标签 [flutter-canvas]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
691 浏览

performance - Flutter:大画布的缩放会降低 FPS

我创建了一个CustomPainter,它可以绘制包含 10000 个元素的大画布。包含此画家的CustomPaint包装在RepaintBoundary中。问题:当我使用父小部件的Transform.scale时,观察到 fps 变慢。对于缩放使用这个库:gesture_zoom_box

下面的代码片段:

我尝试PictureRecorder只绘制一张图片并获得了必要的 60fps,但我需要与这个小部件进行快速交互,如果不创建图像缓存,这是不可能的。有谁知道问题是什么?

0 投票
2 回答
2303 浏览

flutter - 如何在 Flutter 中创建指定尺寸的空白图片

我想在 Flutter 中创建一个具有白色背景和指定大小的空白图像,然后我可以稍后将其他图像添加到该空白图像上以将它们合并为新图像。我正在做我的第一个 Flutter 项目,并且仍然通过这个项目学习新事物。感谢您的任何提示。

更新:这里的空白图像是指其中只有白色的图像。

在此处输入图像描述

0 投票
1 回答
2302 浏览

flutter - 如何在 Flutter 的画布上的路径内绘制图案?

我想在 Flutter 的画布上的路径内绘制交叉对角线。

现在,我已经通过将图像资源加载到 a 中ui.Image,然后使用 aCustomPainter和 anImageShader在画布上绘制它来使其工作。它有效,但它要求我为每对线条颜色创建一个图像资源(不仅是红色/黑色)。

接着

但是,我很想知道是否有比加载和绘制资产图像更有效的方法来做到这一点。这应该很容易——毕竟它实际上只是重复线条——但我不知道如何绘制它们并将它们剪辑到路径上。

有什么建议么?

在此处输入图像描述

0 投票
2 回答
598 浏览

flutter - 如何在画布上约束图像

我想在画布上绘制一个 200x200 像素的图像,然后对它做一些其他的事情。我拥有的图像是 900x690,所以理想情况下我想“居中裁剪”图像以使用 Android 术语。出于某种原因,该视频告诉我们使用 aFittedBox然后 a SizedBox。我也尝试将这两个都放入Container. 我尝试将容器大小、大小框大小和客户画家Size设置为 200x200,一切都会产生全屏图像。谁知道我做错了什么:)

这是代码:

0 投票
2 回答
3315 浏览

flutter - 使用 Custom Painter 在 Flutter 中遮盖两个图像

你好,谁能告诉我为什么这个掩蔽尝试的背景是黑色的。这一定很接近,但我就是无法杀死背景。我已经看到其他参考,这saveLayer(rect, paint)是这里的关键,因为它将整个画布矩形推入掩蔽操作。这个问题(没有屏蔽操作)和这个问题(没有实际答案)很相似,但对我没有用。

主要.dart

面条jpg.jpg

在此处输入图像描述

松鼠.jpg

在此处输入图像描述

结果

在此处输入图像描述

0 投票
1 回答
1108 浏览

flutter - 无法在 Flutter 画布上绘制图像

我目前正在尝试在颤动的画布上绘制图像,然后在图像上绘制矩形以覆盖特定数据。我遇到了一个问题,矩形画得很好,但图像没有画在后面。它看起来好像根本没有被绘制。

我正在将图像从字节加载到 Dart UI Image 对象中。加载图像后,我创建一个 PictureRecorder 并将其传递给 Canvas 对象。然后我尝试首先绘制图像对象,然后是顶部的矩形。完整代码如下:

结果如下:

在此处输入图像描述

如您所见,矩形绘制得非常好,但是,背景中的图像不可见。我还应该做些什么来绘制图像,还是有其他方法可以做到这一点?

谢谢!

0 投票
0 回答
385 浏览

flutter - 在 Flutter 中使用橡皮擦覆盖图像

我正在制作一种绘画应用程序,让您在背景图像上绘画。有一些工具,比如笔,然后是橡皮擦。理想情况下,我们只在背景颜色上绘画,但它是一个图像。当我们在屏幕上平移时,我们的想法是删除手指下的点,但偏移量和本地位置不匹配(它们就像 40(单位?)关闭)。

如果我可以使用另一种方法,那就太好了,但我现在还看不到。

0 投票
2 回答
675 浏览

flutter - 如何在 Flutter 中使用两个自定义画家?

我做了2个定制画家

1.

如果我使用自定义画家制作单个形状。画家从页面开始绘制它。

但是如果我像这样将另一个添加到列表视图中。第二个三角形从第一个屏幕的底部开始。

我如何使它们具有相同的起点?

0 投票
1 回答
4694 浏览

flutter - 如何在 Flutter 的 Canvas 上绘制 Widget?

有没有办法Widget在 a 的给定位置绘制 a Canvas

更具体地说,我想在实际小部件前面单独绘制Marker与 a 相关的子小部件。这是创建一个可以做到这一点的尝试,但我无法弄清楚如何在画布上实际绘制小部件。使用requires a ,我不知道如何创建/检索:FlutterMapCanvasFlutterMapCustomPainterRenderObjectPaintingContext

0 投票
1 回答
225 浏览

flutter - Flutter:路径缩放导致形状不对齐,我该如何对齐?

我正在尝试使用 CustomPainter 绘制多边形,这工作正常。然后我想绘制第二个多边形,它与下面的第一个多边形相同,但大小是 X 倍。目前我正在改变路径,如:

然而,polygon2 似乎也被翻译了,这是不希望的。我希望它完全位于多边形 1 后面。

我如何实现这一目标?

图片供参考:

多边形 1(绿色)和多边形 2(橙色)远离 (0,0) 且未对齐

在此处输入图像描述

多边形 1(绿色)和多边形 2(橙色)在 ~ (0,0) 处并对齐

在此处输入图像描述