问题标签 [flutter-canvas]

我一直在尝试开发一个绘图应用程序，所有示例代码，包括来自 The Boring Flutter Development Show 的示例代码都不能很好地转化为实际使用。

主要问题是它CustomPaint的绘制操作太昂贵并且重新绘制每一点、每一帧。随着点数的增加，颤振应用每帧的渲染时间显着增加

从我花时间寻找解决这个问题的方法开始，我发现了这些

1. RepaintBoundary: 栅格化图层

2. Custom Widget using SingleChildRenderObjectWidgetand RenderProxyBox: 必须实现一个paint方法并且不能传递一个控制器

我认为上述任何解决方案都不能很好地满足我的需求：无需重新绘制即可顺利进行画布绘制操作。我什至尝试简化这些要点，但由于固有的机制，这也不起作用CustomPaint

如果有办法将画布作为小部件传递并附加控制器，则可以轻松存储捕获的点并使用基本的画布操作，例如canvas.drawPath()或canvas.drawLine()非常有效

任何建议都会有所帮助。谢谢！

我是 Flutter Canvas 的新手，我使用 CustomPainter 在屏幕上绘制图表以及其他一些小部件。一切正常，只是图表在某些情况下没有出现。当我单击显示的日期时，应该显示图表。例如，如果我单击第 1 天它会显示，然后在第 2 天它不会显示如果我单击第 3 天它会显示如果我今天返回 2 它会显示。这只会在一个月的 2 或 3 天发生，有时它会持续一整天。

另外，我注意到，当所选日期的图表未显示时，当我关闭当前屏幕并通过按应用栏上的退格键返回上一个屏幕时，它会出现一瞬间。

我正在尝试在 Flutter 应用程序中创建视差背景，构建它的最有效方法是使用Stack填充屏幕的图像作为背景，然后将我的列表放在顶部。图像ImageRepeat在 Y 轴上用一组平铺。然后计划是偏移磁贴的原点与ScrollController我用于我的列表的同步。然后我可以调整平铺图像的原点以创建视差效果。这应该很简单。这是上下文的一些代码：

我的问题是 Image 没有offset属性或origin位置。我需要一些关于最简单方法的建议。我已经看到有自定义画家、画布方法等，但是当小部件中应该有更优雅的解决方案时，它们似乎都过于复杂Image，或者可能在另一个小部件中可以给我相同的视差效果。

Flutter 内置的 Canvas 绘图方法是否可以直接用于渲染可变宽度的笔画，例如反映手写应用程序中每个笔画施加的压力？

理想情况下，以与 SVG 的 XML-esque 格式保存兼容的方式（底部示例）。

我认为我注意到的/遇到的麻烦/当前的尝试：

canvas.drawPath, canvas.drawPoints,canvas.drawPolygon等canvas.drawLines都只采用一个 Paint 对象，而该对象又可以有一个strokeWidth（与采用 Paint 对象或strokeWidths 的列表相反，这样除了位置之外的路径参数可以点对点更改并在其间插值）。

strokeWidth通过迭代位置和压力​​数据列表并使用相应的 Canvas 方法来绘制具有不同 s 或半径的线、多边形或点，从而导致没有插值/路径看起来不是连续描边。

OneNote 的屏幕截图显示了我想要的行为：

来自应用程序的屏幕截图，下面的最小工作示例产生：

（未优化）最小的工作示例：

我将尝试编写自己的实现，以从 PointerEvents 渲染美观的 SVG 友好数据，但是现有的许多类都感觉 SVG/漂亮矢量兼容（例如，所有 lineTos、moveTos、笔画类型和结尾以及其他参数) 我认为值得检查是否有我遗漏的东西，而这些方法已经可以做到这一点？

Xournal++ 保存的 SVG 文件中的几行示例，每个线段的笔画宽度参数都在变化，所有其他列出的参数可能也有可能发生变化。每行包含一个 moveTo 命令（M）和一个 lineTo 命令（L），后者从当前位置（最后一个 moveTo-ed 或 lineTo-ed）绘制一条线，让人想起 Flutter 的分段/子路径和当前点, 到指定的偏移量：

该方法似乎是“画一条很短的线，改变笔画宽度，从前一个位置开始画下一条很短的线”，我试图用上面的绘画方法来模拟。

我正在尝试使用 drawPoints 方法绘制弧线，如何计算绘制弧线所需的点？（任何半径）

我有一个 CustomPainter，我想每隔几毫秒渲染一些项目。但我只想渲染自上次绘制以来已更改的项目。我计划手动清除将要更改的区域并仅在该区域内重新绘制。问题是每次调用paint() 时，Flutter 中的画布似乎都是全新的。我知道我可以跟踪整个状态并每次都重绘所有内容，但出于性能原因和特定用例的考虑，这是不可取的。以下是可能代表该问题的示例代码：

我知道当画布大小发生变化时，一切都需要重新绘制。

我没有在颤振中使用过画布，但我认为像图像中的那个编辑文本框可以通过画布来实现。背景随着文本长度扩展，如果一行中的文本长度为 0，则没有背景。

如果您有任何代码或建议，请提供帮助。

不知道我在这里缺少什么。想让 Container UI 像 Material Filled Text Field 一样。只是想知道我们是否可以一起使用 BorderSide 和 borderRadius 或者它们分开工作。并且只使用容器我怎么能做到这一点？

我正在尝试围绕画布的中心旋转绘制在画布上的文本。相反，在下面的代码中，当我按下浮动按钮时，文本围绕文本​​的左上角旋转。

按下按钮会增加角度，该角度被传递CanvasPainter给以绘制文本。

矩形的左上角最初应位于offset。

我有 2 个屏幕。

在第一个屏幕中，我从网上加载了一张图片，并让我的用户在图片上绘制了一个矩形。我在. onPanStart_ 我正在保存开始和结束偏移值。onPanUpdateGestureDetector

在第一个屏幕上绘制矩形的屏幕截图：

现在我想在一个新屏幕中再次加载图像，并将矩形从我之前保存的偏移值重新绘制到图像上。但矩形总是出现在错误的位置，有时甚至出现在图像之外。

这是我从保存的偏移值中重绘矩形的方法。

重绘矩形时的屏幕截图 问题：如何使用我在第一个屏幕上保存的偏移值在第二个屏幕的图像上重绘矩形。