属性浏览器 - 画笔设置
画笔设置
- 基本编辑界面
- Html5 Canvas
- 画笔
基本编辑界面
作为一个试图提供编辑功能的图形软件，RAD的做法是必须提供的。首当其冲的就是属性浏览器。
在uniGUI中，包装了Exj.grid.property.grid形成PropertyGrid，这在一般情况下是足够用了，美中不足的是，该控件还未实现分组与嵌套效果，刚上手uniGUI，这个暂且不管，留待后续有更好的解决方案。
基于uniGUI，实现界面组态效果比较轻松。
这样看起来，感觉就是一个桌面软件。从编辑的角度，也还可以接受。而其他的页面功能，可以切换到另一种版式，这些想必是很容易支持与实现的。
Html5 Canvas
基于以前编程的认知，画图也就几个基本资源对象的处理：Pen、Brush、Font。不过要到网页上实现，HTML5 Canvas的原理就得搞明白。
这种基础知识，网上教学资源非常丰富，我粗搜了一下，最终选定mozilla网站的Canvas教程，算是把HTML5 Canvas入了个门。
边学的过程，边整理了个自用WORD文档，看起来更方便一些，有需要的可以在CSDN下载。象征性地收一个下载积分，也方便我后续下载另的资源。
画笔
先实现画笔的属性设置。最终效果如下：
根据教程可知，可以通过一系列属性来设置线的样式。
- 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