加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 大数据 > 正文

[原创] 改善 Firemonkey Canvas 几何绘图质量问题（移动平台）

发布时间：2020-12-15 04:38:57 所属栏目：大数据 来源：网络整理
导读：说明： Fiiremonkey 的跨平台能力，大家有目共睹（一码同介面跨四平台），唯独移动平台在几何绘图方面，质量始终不尽人意，我也曾试着去修正（如：），也曾找过第三方案（如：），但都不完美，我一直在想，移动平台有这么强的绘图能力及质量（Android iOS）

说明：

　　Fiiremonkey 的跨平台能力，大家有目共睹（一码同介面跨四平台），唯独移动平台在几何绘图方面，质量始终不尽人意，我也曾试着去修正（如：），也曾找过第三方案（如：），但都不完美，我一直在想，移动平台有这么强的绘图能力及质量（Android & iOS），如果能直接拿来用，不是很好？为什么 Firemonkey 要自己重写？

　　目前网上许多针对此问题的改善方案，但多以控件形式，且需依各平台的绘图函数来绘图，或仅提供固定的几何图形控件，如果能延用现有的 TCanvas.Draw????? 绘图代码，只要加入几行代码（或编译开关），就能达到原生绘图的效果，岂不是很理想，于是开是构想这种方案的可行性，最后证实是可行的。

　　要先说明的是，这里提供的只是一种改善方案，而不是修正，最终还是希望能受到 EMB 官方的关注，由官方来改进这个问题。

用法及效果：

FMX 的绘图方法：

== == DesRect :=<span style="color: #000000"> Rect;
InflateRect(DesRect,-(Canvas.Stroke.Thickness / <span style="color: #800080">2),-(Canvas.Stroke.Thickness / <span style="color: #800080">2)); <span style="color: #008000">//<span style="color: #008000"> 线在区内
Canvas.FillRect(DesRect,<span style="color: #800080">30,AllCorners,<span style="color: #800080">1<span style="color: #000000">);
Canvas.DrawRect(DesRect,<span style="color: #800080">30,<span style="color: #800080">1<span style="color: #000000">);
<span style="color: #0000ff">end;

说明AndroidiOSWindowsmacOS上面的代码，使用 FMX 绘图方法

（移动平台是有问题的）

下面的代码，使用原生绘图方法

（四个平台全部相同了）

下面改成原生绘图方案，只要在原有絵图代码前後加入二行代码（原绘图代码不用更动）：

<span style="color: #cccccc">procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
var Rect,DesRect: TRectF;
begin
Rect := PaintBox1.LocalRect;
Canvas.Stroke.Thickness := 10;
Canvas.Stroke.Kind := TBrushKind.Solid;
Canvas.Stroke.Dash := TStrokeDash.DashDotDot;

<span style="color: #008000">{<span style="color: #008000">$IFDEF UseNativeDraw<span style="color: #008000">}Canvas.NativeDraw(Rect,<span style="color: #0000ff">procedure <span style="color: #0000ff">begin <span style="color: #008000">{<span style="color: #008000">$ENDIF<span style="color: #008000">} <span style="color: #008000">//<span style="color: #008000"> 原生绘图 by Aone

<span style="color: #cccccc"> DesRect := Rect;
InflateRect(DesRect,-(Canvas.Stroke.Thickness / 2),-(Canvas.Stroke.Thickness / 2)); // 线在区内
Canvas.FillRect(DesRect,30,1);
Canvas.DrawRect(DesRect,1);

<span style="color: #008000">{<span style="color: #008000">$IFDEF UseNativeDraw<span style="color: #008000">}<span style="color: #0000ff">end);<span style="color: #008000">{<span style="color: #008000">$ENDIF<span style="color: #008000">} <span style="color: #008000">//<span style="color: #008000"> 原生绘图 by Aone
<span style="color: #cccccc">end;

运作原理：

  • 它的运作原理很简单，就是先配置一个原生的绘图区域 Bitmap，再将几何图形画在这个区域里，最后将这个区域里的内容，转回 TBitmap，再显示到 Canvas 里
  • 利用 Delphi Pascal Helper 语言特性，针对 TCanvas 来做扩展，如此才能达到不改动原有的绘图代码
  • 目前这个作法，相同的绘图代码，可以跨四个平台：

    • Android,iOS：使用原生绘图 TCanvasHelper 方法

    • Windows,masOS：使用原来 TCanvas 方法（这二个平台本来就没有质量问题，所以不用重写）

  • 我们无法触及 FMX 的最核心，只能利用这种 Bitmap 方式来变通，要知道这种方式可能带来的问题（记忆体及效能），才不致错用

  • 注意：如果引用了 FMX.Graphics.Native 就必需使用下面的方式来写绘图代码，否则请不要引用：
    <span style="color: #008000">{<span style="color: #008000">$IFDEF UseNativeDraw<span style="color: #008000">}Canvas.NativeDraw(Rect,<span style="color: #0000ff">procedure <span style="color: #0000ff">begin <span style="color: #008000">{<span style="color: #008000">$ENDIF<span style="color: #008000">} <span style="color: #008000">//<span style="color: #008000"> 原生绘图 by Aone

    <span style="color: #008000">//<span style="color: #008000"> 绘图代码

    <span style="color: #008000">{<span style="color: #008000">$IFDEF UseNativeDraw<span style="color: #008000">}<span style="color: #0000ff">end);<span style="color: #008000">{<span style="color: #008000">$ENDIF<span style="color: #008000">} <span style="color: #008000">//<span style="color: #008000"> 原生绘图 by Aone

调用原生绘图的 TCanvas 函数：

TBrush 涂刷 & TStrokeBrush 线刷：
  • 除了 Bitmap 涂色尚未支持（若有此需求，可自行修改源码，加入此特性）
  • FMX 在移动平台是不支持画线加渐层涂色，使用原生绘图，已经可以轻松实现（支持 Linear 线渐层及 Radial 圆渐层效果）：
原生FMX</tr>
<tr>
<td><img src="https://www.52php.cn/res/2019/01-12/18/8b624ec2e99ecb2a9d631a3bdfa6f9a1.png" alt=""></td>
<td><img src="https://www.52php.cn/res/2019/01-12/18/0ed9476e06ae334d9d2764a81c95f505.png" alt=""></td>

</tr>

</table>

  • == ====<span style="color: #008000">{<span style="color: #008000">$IFDEF UseNativeDraw<span style="color: #008000">}Canvas.NativeDraw(Rect,<span style="color: #0000ff">procedure <span style="color: #0000ff">begin <span style="color: #008000">{<span style="color: #008000">$ENDIF<span style="color: #008000">} <span style="color: #008000">//<span style="color: #008000"> 原生绘图 by Aone
    <span style="color: #000000">
    DesRect :    =<span style="color: #000000"> Rect;
    InflateRect(DesRect,<span style="color: #800080">1    <span style="color: #000000">);

    <span style="color: #008000">{<span style="color: #008000">$IFDEF UseNativeDraw<span style="color: #008000">}<span style="color: #0000ff">end);<span style="color: #008000">{<span style="color: #008000">$ENDIF<span style="color: #008000">} <span style="color: #008000">//<span style="color: #008000"> 原生绘图 by Aone
    <span style="color: #0000ff">end;

    • 已知问题：

    • 真机 iOS 64bit 无法显示虚线（虚拟机没问题）
    • 未完成的函数功能及特性，欢迎大家一起完善

    • 源码：
    • Android Test apk：

    2017.06.22 新增 TestArc Demo（已更新到 GitHub）：

    参考资料：

    （编辑：李大同）

    【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

      相关内容
        推荐文章
          站长推荐
          热点阅读

            【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

            建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

            Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同