问题标签 [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 回答
63 浏览

flutter - Flutter CustomPainter 调整大小

所以我一直在尝试调整 a 的大小CustomPainter并让它看起来像是像素艺术,但我没能做到。

如果我将 scaleFactor 设置为 1,我当然会得到我想要的结果

customPainter_scale_1

如果我改变 scaleFactor 我会得到这样的结果:

在此处输入图像描述

但我实际上希望它喜欢的是这样的:

在此处输入图像描述

我什至尝试过使用Transform.scale小部件(甚至没有改变FilterQuality帮助),甚至在画布内设置了一个比例矩阵,canvas.transform()但我没有得到任何好的结果。

0 投票
2 回答
418 浏览

flutter - Flutter with Canvas 中的圆波动画 - 图表

我正在尝试使用 Flutter 中的 Canvas 创建动画。我正在尝试做的动画是这样的:

例子:

我设法做了一些动画,但没有一个像我需要的那样。如果已经使用过 Canvas 的人能以任何方式帮助我,我将不胜感激。

我需要使用画布来实现此结果的原因是因为我正在直接对负责生成图表的包进行更改。有一些图表包可以做类似的事情,但出于商业原因,我需要使用已经在使用的东西。

0 投票
0 回答
64 浏览

flutter - 在画布放大、缩小并在上面带有图像的情况下进行平移后无法执行绘图

目标:我想制作一个图像标记功能,即在图像上绘图以及放大和缩小功能。为此,我使用了带有图像的画布和颤振变换小部件来实现缩放和平移。我已经成功地使图像缩放和翻译。我也可以在该图像上进行绘图。

问题:问题是我只能在图像为原始大小时设置的区域上进行绘图,即当图像扩展时,我只能在新扩展(缩放)图像下的那个区域(原始图像区域)上绘图,当我移动图像时会出现同样的问题。

注意 - 我已将画布的大小设置为我的图像大小。

在下面的屏幕截图中 1.before_zoom 在我从资产加载时显示我的图像。在那我画了一个矩形,它显示可以在图像的任何部分进行绘图。在 after_zoom 图像中,我再次绘制了一个矩形,显示了可用的绘图屏幕。如果我尝试在该矩形之外执行绘图,则在移动图像时会出现同样的问题。我认为的问题是,当图像首次加载以及图像扩展或移动时,画布绘图空间得到修复,它只允许在图像加载时首次设置的区域上绘图。所以任何人都知道如何解决这些问题或任何其他方法来实现这些功能。

代码 :

图片供参考。 缩放前

缩放后

0 投票
0 回答
33 浏览

flutter - 使用来自 Provider 的异步数据更新颤振画布

在屏幕最初加载后,我正在努力将异步数据绘制到 Flutter 画布中。我想知道构建我的工作流程以允许更新的最佳方式。

屏幕的整个生命周期如下所示:

我了解第 1、2 和 3 点的工作原理,第 3 和 4 点有点棘手。

该类ScreenData包含一些在异步调用中使用的简单数据,在绘制屏幕时需要其结果。

我被困在哪里

我可以通过Listenable listenable = Provider.of<ScreenData>(context, listen: true);以下函数确保在 ScreenData 更新时画布调用重绘:

但是,我需要使用这个新ScreenData对象执行异步请求,然后paint才能调用另一个对象。我不知道把它放在哪里,因为paint需要同步。

有没有一种简单的方法可以确保我在paint调用之前预加载了所有数据?

0 投票
1 回答
80 浏览

flutter - 如何在颤动的画布中仅绘制文本的笔画?

我正在尝试在我的颤振应用程序中实现一个功能,用户可以在笔触和填充视图之间切换,用于文本(如 adobe illustrator 或类似)。如何在颤振画布中获得这种效果。

仅描边文字的图像

这是一个询问如何在 CSS 中实现这一点的问题。

0 投票
1 回答
39 浏览

flutter - 包含在框内使用 Custom Painter 创建的颤振小部件的问题,以及缩放和平移小部件的问题

我已经用 Custom Painter 创建了这个地区的地图视图小部件。我有多条路径并使用画布绘制路径:

我正在使用path_drawing库从 svg 路径获取路径。我正在使用可触摸库来使画布中的每个路径都可点击。

第一个问题是我无法将自定义绘制小部件放入我创建的容器中。自定义绘制的小部件总是超出宽度范围。第二个问题是我不能同时实现双击缩放和捏缩放。我尝试了 zoom_widget,它允许双击但不能平移和捏合。我也尝试过 Flutter 的内置InteractiveViewer功能,但它似乎不适用于我的代码。

这是用于画布的形状数据

当前实现的屏幕截图

0 投票
0 回答
33 浏览

flutter - Flutter 渲染对象层:如何在特定层上渲染小部件?

编辑在进一步阅读后,我在 layer.dart 源文件中遇到了这个:

大多数图层的属性可以发生变化,并且图层可以移动到不同的父级。

所以,我更新了这个问题,我希望这可以进一步缩小范围(原文如下):

是否可以将子窗口小部件的渲染层向上移动,以便早期锚定窗口小部件的渲染层成为其父窗口?如果是这样,一个例子会很棒。用例见下文。

原始问题:

也许我在某个地方完全错了,有一种更简单的方法可以存档,但我被卡住了。试图摆脱我的盒子。这是重新表述这个问题的尝试。

我想要存档的内容:我希望能够在我的树中某处说:blur everything from here然后在树下更远的某个地方再说一遍from now on no more blurring, paint as you are

伪树:

问题主要是'ListView'(也可以SliverChildBuilderDelegate设置addRepaintBoundaries为false):为了将listviews子项模糊在一起,ImageFilter需要在树的上方(对吗?)。这就是为什么BackDropFilter对孩子不起作用的原因。

我很确定我需要访问RenderObjects. 我想出了如何通过canvas.saveLayerand来绘制我的东西.paintChild()。我没有弄清楚:是否可以说:(all my renderobjects childs should now paint to Layer1模糊层)然后,通过另一个访问渲染对象(MyMagicUnBlurrer)all my children from now on shall paint to layer2(一个新的 dstOver 复合层)?!

疯狂猜测:我可以键入ImageFilter.blur()Widget 并由树下的孩子引用它的“Paint()”层吗?

可能我的想法完全错了..任何建议都非常感谢!

@creativecreatoror 可能不适合你?:)

0 投票
1 回答
73 浏览

flutter - Flutter:如何在容器内绘制垂直正弦波?

我怎样才能在颤动的容器中画出这样的东西?PS我是新手。提前致谢。

图片

0 投票
0 回答
50 浏览

flutter - 如何获取 Flutter 画布绘制的每个字符的边界框?

我正在尝试实现一个 pdf 文本覆盖渲染器。我的输入是一个文本行对象列表,基本包含文本内容、文本位置、字体、大小等。

我想让这些文本可选择,我目前的想法是在拖动时,我们有一个开始位置和一个结束位置,所以我们可以将矩形内的每个字符标记为选中,由这两个位置确定。

现在是我遇到的问题,我可以TextSpan轻松地为一行文本创建一个对象的边界框。但似乎我无法为每个角色获得一个边界框。

我不太确定我的尝试是最合理的。如果我错过了什么,请指出正确的方法。任何帮助将不胜感激!

提前致谢!

更新1:

getPositionForOffset当我把光标放在上面时,我发现可以给我字符的偏移量。但是,getBoxesForSelection似乎不起作用。

0 投票
0 回答
64 浏览

flutter - 如何在 Flutter 的 Canvas 中的直线末端绘制箭头的头部

我可以使用两个偏移点在颤动中画一条直线。我使用以下方法来实现这一点:

我正在努力寻找一种方法在这条线的末尾画一个小箭头。我需要一些数学方面的帮助。我的想法是肯定可以做到的