【问题标题】:Draw Path on canvas using vector graphics, not bitmap?使用矢量图而不是位图在画布上绘制路径?
【发布时间】:2017-07-25 11:20:15
【问题描述】:

目前我正在编写一个小应用程序,它允许在给定的图片上进行手指绘画。我目前正在通过实例化与背景图像大小相同的位图然后使用该位图创建画布来执行此操作。然后在此画布上绘制。

这一切都可以正常工作,但是将绘制图形作为矢量数据而不是位图会更好,因此用户以后可以放大而不会出现线条等丑陋的步骤。

这有可能吗?

【问题讨论】:

    标签: android


    【解决方案1】:

    当然。您可以从学习中受益很多课程,但首先要学习的两个课程是路径和绘画。基本上,对于绘图中的每个单独的路径,您将实例化一个路径并在该路径上调用各种方法来添加线条、弧线、矩形等。然后,每个路径都可以添加到您的画布中。每次向 Canvas 添加路径时,都指定要使用的 Paint 对象。 Paint 对象包含有关如何在 Canvas 上实际渲染路径的各种信息,包括笔划宽度;颜色;是描边、描边和填充,还是仅仅填充;等等。

    使用路径、绘画等将矢量图形添加到画布非常简单,您可能很快就会掌握它的窍门。我发现一个名为 Android Vintage Thermometer 的教程是一种很好的学习方式。这是我开始的地方。

    一旦您掌握了绘制到 Canvas 的直线路径的窍门,下一步也许就是将您的屏幕触摸事件转换为一系列小的直线路径段。

    编辑:

    好的,所以从您的评论中我现在了解到您熟悉 Android Path 等,但我没有抓住重点。现在我理解了这个问题,我认为:您要做的是将所有绘制的图形作为矢量数据存储在内存中,这样一旦生成了路径(响应用户手指触摸),这些路径将被保留在内存中作为矢量数据,以便它们可以反复检索,并以不同的比例(缩放级别)或不同的旋转等方式绘制到画布上。

    我目前正在开发一个 SVG 转换器,作为大型应用程序的一部分。现在,我的 SVG 转换器设计为仅解析 SVG 文件一次,将 SVG XML 文件中的所有数据转换为相应的路径、绘画、矩阵等。所有这些向量对象都存储在 ArrayLists 中。我还使用保存到内存中的简单指令集来描述从内存中检索它们的顺序(但这超出了本文的范围)。要将所有图形绘制到 Canvas 上,所有 Path、Paint、Matrix 等对象都以正确的顺序从 ArrayList 中拉回并应用于 Canvas。这意味着 SVG 文件的冗长解析只发生一次;此后,所有的矢量图形都可以一遍又一遍地快速重绘,无论我想要什么比例或变换。

    现在,SVG 和我所讨论的大部分内容可能不相关,但我的基本观点是,就像我所做的那样,您可以尝试将所有 Path 对象存储到某种列表中。当用户触摸屏幕并且您生成路径作为响应,以及将这些路径应用于画布时,您还将所有单独的路径保留到列表中(例如ArrayList<Path>)。也许可以将单独的路径与它们各自的 Paint 对象配对保存,该对象描述了在绘制特定路径时选择的特定颜色、笔画宽度等。每当用户选择放大或缩小(或发生任何其他需要重新绘制画布的事件)时,您只需从内存中重放所有这些路径并将它们写入画布。作为进一步的简化,如果只允许用户进行单一的 Paint 配置(例如,如果用户只允许绘制白线,例如,无法控制宽度),您甚至可以存储用户绘制的所有路径一个单独的 Path 对象,在绘制每个路径时使用 myPath.addPath(newPath) 添加每个路径。

    【讨论】:

    • 感谢您的综述,但我已经熟悉路径、绘画和画布等。我的问题是:当我在画布上绘制路径时,它显然是基于像素的。感谢您的教程tipp,一定要查一下!
    • 明白。我现在在我的回答中添加了一些建议。
    • 好的,所以路径对象包含某种矢量数据,这是一个很好的信息!我会根据你的提示玩一下,谢谢!
    • 如何将SVG路径转换为android路径?
    • @Trevor 我们应该在哪里将用户触摸输入保存到 svg,我的意思是如果用户触摸屏幕,那么我们如何将触摸点(x,y)转换为 svg 数据?我们在哪里存储这些数据以将其渲染回画布??
    【解决方案2】:

    查看this 线程。 SVG(小?)可能满足您的需求。

    【讨论】:

    • 谢谢,我去看看!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-07-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多