属性浏览器 - 画笔设置

关注

原创最新推荐文章于 2026-02-19 00:28:18 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

Edge浏览器默认全屏设置教程对于使用虚拟机或远程连接的用户，建议在Edge的"系统"设置中启用"使用硬件加速"，并关闭"自动调整缩放比例"功能，可显著提升全屏模式下的渲染性能。对于高分辨率屏幕用户，建议在"兼容性"选项卡勾选"替代高DPI缩放行为"，选择"系统（增强）"选项，可避免全屏模式下界面元素模糊的问题。在"设置"→"系统"→"平板模式"中，将"当我登录时"设为"自动切换到平板模式"，可使Edge在二合一设备上自动启用触控优化布局。右键点击Edge桌面图标→选择"属性"→进入"快捷方式"选项卡，这是修改程序启动参数的核心入口。阅读详情

基本编辑界面

作为一个试图提供编辑功能的图形软件，RAD的做法是必须提供的。首当其冲的就是属性浏览器。
在uniGUI中，包装了Exj.grid.property.grid形成PropertyGrid，这在一般情况下是足够用了，美中不足的是，该控件还未实现分组与嵌套效果，刚上手uniGUI，这个暂且不管，留待后续有更好的解决方案。
基于uniGUI，实现界面组态效果比较轻松。在这里插入图片描述
这样看起来，感觉就是一个桌面软件。从编辑的角度，也还可以接受。而其他的页面功能，可以切换到另一种版式，这些想必是很容易支持与实现的。

Html5 Canvas

基于以前编程的认知，画图也就几个基本资源对象的处理：Pen、Brush、Font。不过要到网页上实现，HTML5 Canvas的原理就得搞明白。
这种基础知识，网上教学资源非常丰富，我粗搜了一下，最终选定mozilla网站的Canvas教程，算是把HTML5 Canvas入了个门。
边学的过程，边整理了个自用WORD文档，看起来更方便一些，有需要的可以在优快云下载。象征性地收一个下载积分，也方便我后续下载另的资源。
在这里插入图片描述

画笔

先实现画笔的属性设置。最终效果如下：
在这里插入图片描述
根据教程可知，可以通过一系列属性来设置线的样式。

lineWidth = value，设置线条宽度。
lineCap = type，设置线条末端样式。
lineJoin = type，设定线条与线条间接合处的样式。
miterLimit = value，限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶- 点的长度。
getLineDash()，返回一个包含当前虚线样式，长度为非负偶数的数组。
setLineDash(segments) 接受一个数组，来指定线段与间隙的交替，设置当前虚线样式。
lineDashOffset = value，设置虚线样式的起始偏移量。

下来的工作，就是设计一个人机交互界面，代码中根据各个参数实现预览效果即可。

object UniForm_GdiOption: TUniForm_GdiOption
  Left = 0
  Top = 0
  ClientHeight = 320
  ClientWidth = 631
  Caption = #30011#22270#36164#28304#35774#32622#31383#21475
  OnShow = UniFormShow
  OldCreateOrder = False
  MonitoredKeys.Keys = <>
  PixelsPerInch = 96
  TextHeight = 13
  object UniPageControl1: TUniPageControl
    Left = 0
    Top = 0
    Width = 631
    Height = 276
    Hint = ''
    ActivePage = UniTabSheet1
    Align = alClient
    TabOrder = 0
    ExplicitWidth = 635
    ExplicitHeight = 256
    object UniTabSheet1: TUniTabSheet
      Hint = ''
      Caption = #30011#31508
      ExplicitWidth = 627
      ExplicitHeight = 228
      object UniPanel2: TUniPanel
        Left = 0
        Top = 0
        Width = 623
        Height = 248
        Hint = ''
        Align = alClient
        TabOrder = 0
        BorderStyle = ubsNone
        Caption = ''
        ExplicitLeft = 3
        ExplicitTop = 3
        ExplicitWidth = 624
        ExplicitHeight = 408
        DesignSize = (
          623
          248)
        object UniLabel1: TUniLabel
          Left = 10
          Top = 13
          Width = 32
          Height = 19
          Hint = ''
          Caption = #32447#23485
          ParentFont = False
          Font.Height = -16
          TabOrder = 1
        end
        object UniSpinEdit_PenWidth: TUniSpinEdit
          Left = 52
          Top = 12
          Width = 120
          Hint = ''
          Value = 1
          MaxValue = 100
          MinValue = 1
          TabOrder = 2
          OnChange = UniSpinEdit_PenWidthChange
        end
        object UniPanel_PenColor: TUniPanel
          Left = 52
          Top = 48
          Width = 120
          Height = 25
          Hint = ''
          TabOrder = 3
          BorderStyle = ubsNone
          Caption = ''
          Color = 33023
        end
        object UniLabel3: TUniLabel
          Left = 10
          Top = 86
          Width = 32
          Height = 19
          Hint = ''
          Caption = #26411#31471
          ParentFont = False
          Font.Height = -16
          TabOrder = 4
        end
        object UniComboBox_PenCap: TUniComboBox
          Left = 52
          Top = 85
          Width = 122
          Height = 27
          Hint = ''
          Text = 'UniComboBox_PenCap'
          Items.Strings = (
            'butt'
            'round'
            'square')
          ItemIndex = 0
          ParentFont = False
          Font.Height = -16
          TabOrder = 5
          IconItems = <>
          OnChange = UniSpinEdit_PenWidthChange
        end
        object UniComboBox_PenJoin: TUniComboBox
          Left = 52
          Top = 121
          Width = 122
          Height = 27
          Hint = ''
          Text = 'UniComboBox1'
          Items.Strings = (
            'round'
            'bevel'
            'miter')
          ItemIndex = 2
          ParentFont = False
          Font.Height = -16
          TabOrder = 6
          IconItems = <>
          OnChange = UniSpinEdit_PenWidthChange
        end
        object UniLabel5: TUniLabel
          Left = 10
          Top = 160
          Width = 32
          Height = 19
          Hint = ''
          Caption = #32447#22411
          ParentFont = False
          Font.Height = -16
          TabOrder = 7
        end
        object UniComboBox_PenStyle: TUniComboBox
          Left = 52
          Top = 158
          Width = 122
          Height = 27
          Hint = ''
          Text = 'UniComboBox1'
          Items.Strings = (
            #23454#32447
            '1, 1'
            '4, 2')
          ItemIndex = 0
          ParentFont = False
          Font.Height = -16
          TabOrder = 8
          IconItems = <>
          OnChange = UniSpinEdit_PenWidthChange
        end
        object UniLabel6: TUniLabel
          Left = 10
          Top = 197
          Width = 32
          Height = 19
          Hint = ''
          Caption = #28176#21464
          ParentFont = False
          Font.Height = -16
          TabOrder = 9
        end
        object UniEdit_ColorStops: TUniEdit
          Left = 261
          Top = 195
          Width = 355
          Hint = ''
          Text = '0, '#39'#FF0000'#39'; 1, '#39'#FFFFFF'#39
          ParentFont = False
          Font.Height = -16
          Anchors = [akLeft, akTop, akRight]
          TabOrder = 10
          OnChange = UniSpinEdit_PenWidthChange
        end
        object UniCanvas_Pen: TUniCanvas
          Left = 192
          Top = 8
          Width = 425
          Height = 169
          Hint = ''
          AutoSubmit = False
          Editable = False
        end
        object UniComboBox_Gradient: TUniComboBox
          Left = 52
          Top = 195
          Width = 122
          Height = 27
          Hint = ''
          Text = 'UniComboBox1'
          Items.Strings = (
            #26080#28176#21464
            #32447#24615
            #38647#36798)
          ItemIndex = 0
          ParentFont = False
          Font.Height = -16
          TabOrder = 12
          IconItems = <>
          OnChange = UniSpinEdit_PenWidthChange
        end
        object UniLabel7: TUniLabel
          Left = 193
          Top = 197
          Width = 64
          Height = 19
          Hint = ''
          Caption = #20851#38190#39068#33394
          ParentFont = False
          Font.Height = -16
          TabOrder = 13
        end
        object UniLabel2: TUniLabel
          Left = 10
          Top = 49
          Width = 32
          Height = 19
          Hint = ''
          Caption = #39068#33394
          ParentFont = False
          Font.Height = -16
          TabOrder = 14
        end
        object UniLabel4: TUniLabel
          Left = 10
          Top = 123
          Width = 32
          Height = 19
          Hint = ''
          Caption = #36830#25509
          ParentFont = False
          Font.Height = -16
          TabOrder = 15
        end
      end
    end
    object UniTabSheet2: TUniTabSheet
      Hint = ''
      Caption = 'UniTabSheet2'
      ExplicitWidth = 627
      ExplicitHeight = 228
    end
    object UniTabSheet3: TUniTabSheet
      Hint = ''
      Caption = 'UniTabSheet3'
      ExplicitWidth = 627
      ExplicitHeight = 228
    end
  end
  object UniPanel1: TUniPanel
    Left = 0
    Top = 276
    Width = 631
    Height = 44
    Hint = ''
    Align = alBottom
    TabOrder = 1
    BorderStyle = ubsNone
    Caption = ''
    ExplicitTop = 256
    ExplicitWidth = 635
    object UniBitBtn1: TUniBitBtn
      Left = 432
      Top = 8
      Width = 75
      Height = 25
      Hint = ''
      Glyph.Data = {
        36030000424D3603000000000000360000002800000010000000100000000100
        18000000000000030000C40E0000C40E00000000000000000000FFFFFFFFFFFF
        FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
        FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFAFBFDC0C9EDE5E9F8FFFFFFFF
        FFFFFFFFFFFFFFFFE5E9F8BEC8EDF9FAFDFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
        FCFCFE93A4E21538C2546DD2E4E8F7FFFFFFFFFFFFE4E8F7546DD21437C291A2
        E1FCFCFEFFFFFFFFFFFFFFFFFFFAFBFD94A5E2143AC3062EC20830C25671D3E5
        E9F8E5E9F85671D30830C2062EC2143AC393A4E2FAFBFDFFFFFFFFFFFFBFCAEE
        1942C90A36C60A36C60A36C60B37C5516FD3516FD30B37C50A36C60A36C60A36
        C61942C9BFCAEEFFFFFFFFFFFFE4E8F85677DE0F41D10E3FCA0E3FCA0E3FCA0F
        3FC90F3FC90E3FCA0E3FCA0E3FCA0F41D15677DDE4E8F8FFFFFFFFFFFFFFFFFF
        E2E7F8587CE1134BD61249CF1249CF1249CF1249CF1249CF1249CF134BD6597C
        E1E3E8F8FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE3E8F8557BE11753D71753D417
        53D41753D41753D41753D7557CE1E4E9F8FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
        FFFFFFE5E9F8587FDB1B5CD81B5DD91B5DD91B5DD91B5DD91B5CD8587FDBE5E9
        F7FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE4E8F76088DE1F65DC2068DE2067DE20
        67DE2067DE2067DE2068DE1F65DC6088DEE4E8F7FFFFFFFFFFFFFFFFFFE5EAF8
        618BE0246EE02471E32471E32471E42572E72572E72471E42471E32471E3246D
        E0628CE0E5EAF8FFFFFFFFFFFFC2CEF02F74E4297CEA287AE7287AE8297BEC5E
        8FE85E8FE8297BEC287AE8287AE7297CEA2F75E5BFCDF0FFFFFFFFFFFFF9FAFD
        9AB4EC3280EC2D84EE2C82EF6597EAE5EAF8E5EAF86597EA2C82EF2D84EE3280
        ED95B1ECF8F9FDFFFFFFFFFFFFFFFFFFFBFBFD9AB6EC3685EB679AEAE3E8F8FF
        FFFFFFFFFFE3E8F8679AEA3686EC95B3ECF9FAFDFFFFFFFFFFFFFFFFFFFFFFFF
        FFFFFFF9FAFDC2D1F1E6EBF9FFFFFFFFFFFFFFFFFFFFFFFFE6EBF9C0CFF1F8F9
        FDFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
        FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF}
      Caption = #21462#28040
      ModalResult = 2
      ParentFont = False
      Font.Height = -16
      TabOrder = 1
    end
    object UniBitBtn2: TUniBitBtn
      Left = 536
      Top = 8
      Width = 75
      Height = 25
      Hint = ''
      Glyph.Data = {
        06030000424D060300000000000036000000280000000F0000000F0000000100
        180000000000D0020000C40E0000C40E00000000000000000000FFFFFFFFFFFF
        FFFFFFFFFFFFFFFFFFFFFFFFCEDFCEB4D0B4EDF3EDFFFFFFFFFFFFFFFFFFFFFF
        FFFFFFFFFFFFFF000000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF94BE941983191A
        8E1A3B8E3BF2F6F2FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF000000FFFFFFFFFFFF
        FFFFFFFFFFFFF3F4F3007200059A050BA10B0084008FBA8FFFFFFFFFFFFFFFFF
        FFFFFFFFFFFFFF000000FFFFFFFFFFFFFFFFFFFEFCFE3E8C3E008F0000980000
        9800009400057605FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF000000FFFFFFFFFFFF
        FFFFFF95BE95007E00009B00009200008F00019B010081009CBE9CFFFFFFFFFF
        FFFFFFFFFFFFFF000000FFFFFFFFFFFFD5E3D5007800009A000088003186312C
        832C009100009A00137B13F1F4F1FFFFFFFFFFFFFFFFFF000000FFFFFFFFFFFF
        3D903D0091000084004B944BF2F6F2D0E0D0037B030098000082008DBA8DFFFF
        FFFFFFFFFFFFFF000000FFFFFF89B7892495241F8D1F5C9C5CFFFFFFFFFFFFFF
        FFFF9FC39F007B00009800147E14FFFDFFFFFFFFFFFFFF000000D8E6D8198019
        1E871E9CC39CFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF619E61008B0000860092BC
        92FFFFFFFFFFFF0000004B934B066D06B7D3B7FFFFFFFFFFFFFFFFFFFFFFFFFF
        FFFFFFFFFFFFFFFF207E2036A836298729FFFFFFFFFFFF000000A7CAA7F3F7F3
        FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFDFEADF2B8A2B2897
        2895BF95FFFFFF000000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
        FFFFFFFFFFFFFFFFFFFFFF97C0971186113B903BFEFDFE000000FFFFFFFFFFFF
        FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF6BA7
        6B007200B8D4B8000000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
        FFFFFFFFFFFFFFFFFFFFFFFFFFFFFEFEFE3284323F8C3F000000FFFFFFFFFFFF
        FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
        FFDFEBDF3D8A3D000000}
      Caption = #30830#23450
      ModalResult = 1
      ParentFont = False
      Font.Height = -16
      TabOrder = 2
    end
  end
end