我如何使用canvas或flutter中的任何其他方法绘制形状？

Question

在制作/绘制形状图像之前显示的样子

使形状图像显示如下：

这里我分享用于在图像上绘制形状的区域数据

"points": [
                                {
                                    "x": 344.5,
                                    "y": 359.15625,
                                    "_id": "6587fd20aff80b07546062f9"
                                },
                                {
                                    "x": 343.5,
                                    "y": 547.15625,
                                    "_id": "6587fd20aff80b07546062fa"
                                },
                                {
                                    "x": 606.5,
                                    "y": 548.15625,
                                    "_id": "6587fd20aff80b07546062fb"
                                },
                                {
                                    "x": 605.5,
                                    "y": 359.15625,
                                    "_id": "6587fd20aff80b07546062fc"
                                }
                            ]

• 有来自后端的任意分辨率的主要案例图像
• 在所有平台上运行后，从 flutter 端运行应用程序优先移动端开始
• 需要根据分辨率进行绘制应用端图像在移动端显示修复或显示图像实际尺寸
• 形状可以是任何类型的圆形、星形、矩形、三角形等...

Answer 1

要将矩形放置在图像顶部，我建议使用 Stack 小部件和 Rect 类。

来自后端的图像需要包含有关在何处放置矩形以覆盖特定区域的信息。您可以尝试一些巧妙的算法来自动神奇地检测房间，但这似乎很难。如果来自后端的图像可以是任何分辨率，那么我建议用两个点（可能是左上角和右下角）表示此“区域”信息，其值定义为百分比。然后当你从后端获取图像时，你可以检查它的大小，然后通过乘以宽度 * 百分比和高度 * 百分比来计算矩形的点数。