文中例子是基于wpf Canvas写的，由于Maui还没有支持Canvas，所以顺手自己写一个。之前写了一个InkCanvas，发现扩展性太差了，这次写这个Canvas，彻底解决扩展性问题，支持自定义碰撞测试等。自己写的碰撞测试，是基于点集碰撞测试，可以处理任何点集，所以大家可以继承Shape类，写自己的Shape类。我抛砖引玉，写了几个常用的。Canvas目前支持的功能，单选，多选，单选移动，多选移动，二指手势缩放，多指手势选中。删除功能很简单，就不实现了。
Shape类以及子类扩展（ImageShape是一个非常有用的子类，里面有如何把ImageSource转换为IImage的代码），利用矩阵完成旋转，位移，缩放。把常见的实现放到了基类，这样子类可以专注StyleDraw的逻辑，而不用担心旋转等影响。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
|
//Shape基类
public
abstract
class
Shape : BindableObject
{
public
static
readonly
BindableProperty FillColorProperty =
BindableProperty.Create(nameof(FillColor),
typeof
(Color),
typeof
(Shape), Colors.Transparent);
public
static
readonly
BindableProperty StrokeColorProperty =
BindableProperty.Create(nameof(StrokeColor),
typeof
(Color),
typeof
(Shape), Colors.Black);
public
static
readonly
BindableProperty StrokeThicknessProperty =
BindableProperty.Create(nameof(StrokeThickness),
typeof
(
float
),
typeof
(Shape), 1f);
public
static
readonly
BindableProperty XProperty =
BindableProperty.Create(nameof(X),
typeof
(
float
),
typeof
(Shape), 0f);
public
static
readonly
BindableProperty YProperty =
BindableProperty.Create(nameof(Y),
typeof
(
float
),
typeof
(Shape), 0f);
public
static
readonly
BindableProperty WidthProperty =
BindableProperty.Create(nameof(Width),
typeof
(
float
),
typeof
(Shape), 100f);
public
static
readonly
BindableProperty HeightProperty =
BindableProperty.Create(nameof(Height),
typeof
(
float
),
typeof
(Shape), 100f);
public
static
readonly
BindableProperty RotationProperty =
BindableProperty.Create(nameof(Rotation),
typeof
(
float
),
typeof
(Shape), 0f);
public
static
readonly
BindableProperty ScaleXProperty =
BindableProperty.Create(nameof(ScaleX),
typeof
(
float
),
typeof
(Shape), 1f);
public
static
readonly
BindableProperty ScaleYProperty =
BindableProperty.Create(nameof(ScaleY),
typeof
(
float
),
typeof
(Shape), 1f);
public
static
readonly
BindableProperty IsSelectedProperty =
BindableProperty.Create(nameof(IsSelected),
typeof
(
bool
),
typeof
(Shape),
false
);
public
static
readonly
BindableProperty StrokeDashPatternProperty =
BindableProperty.Create(nameof(StrokeDashPattern),
typeof
(
string
),
typeof
(RectangleShape),
null
);
public
static
readonly
BindableProperty StrokeDashOffsetProperty =
BindableProperty.Create(nameof(StrokeDashOffset),
typeof
(
float
),
typeof
(RectangleShape), 0f);
public
static
readonly
BindableProperty AspectRatioProperty =
BindableProperty.Create(nameof(AspectRatio),
typeof
(
float
),
typeof
(Shape), 1f);
public
Color FillColor
{
get
=> (Color)GetValue(FillColorProperty);
set
=> SetValue(FillColorProperty, value);
}
public
Color StrokeColor
{
get
=> (Color)GetValue(StrokeColorProperty);
set
=> SetValue(StrokeColorProperty, value);
}
public
float
StrokeThickness
{
get
=> (
float
)GetValue(StrokeThicknessProperty);
set
=> SetValue(StrokeThicknessProperty, value);
}
public
float
X
{
get
=> (
float
)GetValue(XProperty);
set
=> SetValue(XProperty, value);
}
public
float
Y
{
get
=> (
float
)GetValue(YProperty);
set
=> SetValue(YProperty, value);
}
public
float
Width
{
get
=> (
float
)GetValue(WidthProperty);
set
=> SetValue(WidthProperty, value);
}
public
float
Height
{
get
=> (
float
)GetValue(HeightProperty);
set
=> SetValue(HeightProperty, value);
}
public
float
Rotation
{
get
=> (
float
)GetValue(RotationProperty);
set
=> SetValue(RotationProperty, value);
}
public
float
ScaleX
{
get
=> (
float
)GetValue(ScaleXProperty);
set
=> SetValue(ScaleXProperty, value);
}
public
float
ScaleY
{
get
=> (
float
)GetValue(ScaleYProperty);
set
=> SetValue(ScaleYProperty, value);
}
public
string
StrokeDashPattern
{
get
=> (
string
)GetValue(StrokeDashPatternProperty);
set
=> SetValue(StrokeDashPatternProperty, value);
}
public
float
StrokeDashOffset
{
get
=> (
float
)GetValue(StrokeDashOffsetProperty);
set
=> SetValue(StrokeDashOffsetProperty, value);
}
public
bool
IsSelected
{
get
=> (
bool
)GetValue(IsSelectedProperty);
set
=> SetValue(IsSelectedProperty, value);
}
public
float
AspectRatio
{
get
=> (
float
)GetValue(AspectRatioProperty);
set
=> SetValue(AspectRatioProperty, value);
}
public
RectF Bounds
{
get
{
// 使用局部坐标系（X, Y）为左上角的顶点
PointF[] points =
this
.GetPoints();
// 应用当前变换矩阵到所有顶点
Matrix3x2 transform = GetTransformMatrix();
for
(
int
i = 0; i < points.Length; i++)
{
points[i] = Transform(points[i], transform);
}
// 计算变换后顶点的边界框
// 计算变换后边界
float
minX = points.Min(p => p.X);
float
minY = points.Min(p => p.Y);
float
maxX = points.Max(p => p.X);
float
maxY = points.Max(p => p.Y);
return
new
RectF(minX, minY, maxX - minX, maxY - minY);
}
}
// 获取变换矩
protected
Matrix3x2 GetTransformMatrix()
{
// 计算原始中心点（局部坐标系）
float
centerX = X + Width / 2;
float
centerY = Y + Height / 2;
// 构建变换矩阵
return
Matrix3x2.CreateScale(AspectRatio, AspectRatio) *
Matrix3x2.CreateRotation(Rotation * (MathF.PI / 180),
new
Vector2(centerX, centerY)) *
Matrix3x2.CreateScale(ScaleX, ScaleY);
}
//获取逆矩阵
protected
Matrix3x2 GetInverseMatrix()
{
Matrix3x2.Invert(GetTransformMatrix(),
out
Matrix3x2 result);
return
result;
}
public
PointF Transform(PointF point, Matrix3x2 matrix)
{
return
new
PointF(
point.X * matrix.M11 + point.Y * matrix.M21 + matrix.M31,
point.X * matrix.M12 + point.Y * matrix.M22 + matrix.M32
);
}
//子类可重写
public
virtual
bool
HitTest(PointF p,
float
tolerance = 5f)
{
PointF[] points = GetPoints();
Matrix3x2 transform = GetTransformMatrix();
for
(
int
i = 0; i < points.Length; i++)
{
points[i] = Transform(points[i], transform);
}
//简单判断
if
(Bounds.Contains(p))
{
//检查一个点或者两个点
if
(points.Count() == 1)
{
return
Math.Sqrt(DistanceSquare(p, points[0])) <= tolerance;
}
else
if
(points.Count() == 2)
{
return
DistanceToSegment(p, points[0], points[1]) <= tolerance;
}
//点在形状类
return
IsPointInPolygon(p, points) || IsPointNearPolygonEdge(p, points, tolerance);
}
return
false
;
}
public
virtual
bool
HitTest(Shape other)
{
if
(
this
.Bounds.IntersectsWith(other.Bounds))
{
// 使用局部坐标系（X, Y）为左上角的顶点
PointF[] pointsA =
this
.GetPoints();
PointF[] pointsB = other.GetPoints();
// 应用当前变换矩阵到所有顶点
Matrix3x2 transformA = GetTransformMatrix();
Matrix3x2 transformB = other.GetTransformMatrix();
for
(
int
i = 0; i < pointsA.Length; i++)
{
pointsA[i] = Transform(pointsA[i], transformA);
}
for
(
int
i = 0; i < pointsB.Length; i++)
{
pointsB[i] = Transform(pointsB[i], transformB);
}
return
PolygonIntersects(pointsA, pointsB);
}
return
false
;
}
//形状到形状 : 检测两个多边形是否相交
public
static
bool
PolygonIntersects(PointF[] polyA, PointF[] polyB)
{
// 检测polyA的边是否与polyB相交
for
(
int
i = 0; i < polyA.Length; i++)
{
int
nextI = (i + 1) % polyA.Length;
for
(
int
j = 0; j < polyB.Length; j++)
{
int
nextJ = (j + 1) % polyB.Length;
if
(LinesIntersect(polyA[i], polyA[nextI], polyB[j], polyB[nextJ]))
return
true
;
}
}
// 检测一个多边形是否完全包含在另一个多边形中
if
(IsPointInPolygon(polyA[0], polyB) || IsPointInPolygon(polyB[0], polyA))
return
true
;
return
false
;
}
//点到点
public
static
float
DistanceSquare(PointF v, PointF w)
{
return
(v.X - w.X) * (v.X - w.X) + (v.Y - w.Y) * (v.Y - w.Y);
}
//点到线
public
static
float
DistanceToSegment(PointF p, PointF v, PointF w)
{
float
l2 = (v.X - w.X) * (v.X - w.X) + (v.Y - w.Y) * (v.Y - w.Y);
if
(l2 == 0.0)
return
(
float
)Math.Sqrt(DistanceSquare(p, v));
float
t = Math.Max(0, Math.Min(1,
((p.X - v.X) * (w.X - v.X) + (p.Y - v.Y) * (w.Y - v.Y)) / l2));
PointF projection =
new
PointF(
v.X + t * (w.X - v.X),
v.Y + t * (w.Y - v.Y));
return
(
float
)Math.Sqrt(DistanceSquare(p, projection));
}
// 射线法判断点是否在多边形内部，默认是闭合路径
public
static
bool
IsPointInPolygon(PointF p, PointF[] polygon)
{
if
(polygon.Length < 3)
return
false
;
bool
inside =
false
;
int
j = polygon.Length - 1;
for
(
int
i = 0; i < polygon.Length; i++)
{
if
((polygon[i].Y > p.Y) != (polygon[j].Y > p.Y) &&
p.X < (polygon[j].X - polygon[i].X) * (p.Y - polygon[i].Y) /
(polygon[j].Y - polygon[i].Y) + polygon[i].X)
{
inside = !inside;
}
j = i;
}
return
inside;
}
// 判断点是否在多边形边线附近
public
static
bool
IsPointNearPolygonEdge(PointF p, PointF[] points,
float
tolerance)
{
if
(points.Length < 2)
return
false
;
for
(
int
i = 0; i < points.Length; i++)
{
int
next = (i + 1) % points.Length;
float
distance = DistanceToSegment(p, points[i], points[next]);
if
(distance <= tolerance)
return
true
;
}
return
false
;
}
//检测两条线段是否相交
public
static
bool
LinesIntersect(PointF a1, PointF a2, PointF b1, PointF b2)
{
float
d = (b2.Y - b1.Y) * (a2.X - a1.X) - (b2.X - b1.X) * (a2.Y - a1.Y);
if
(d == 0)
return
false
;
// 平行线
float
uA = ((b2.X - b1.X) * (a1.Y - b1.Y) - (b2.Y - b1.Y) * (a1.X - b1.X)) / d;
float
uB = ((a2.X - a1.X) * (a1.Y - b1.Y) - (a2.Y - a1.Y) * (a1.X - b1.X)) / d;
return
uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1;
}
public
void
Draw(ICanvas canvas, RectF dirtyRect)
{
canvas.SaveState();
canvas.FillColor = FillColor;
canvas.StrokeColor = StrokeColor;
canvas.StrokeSize = StrokeThickness;
canvas.StrokeDashPattern = StrokeDashPattern?.Split(
" "
).Select(s =>
float
.Parse(s)).ToArray();
canvas.StrokeDashOffset = StrokeDashOffset;
//测试点击区域
if
(IsSelected)
{
canvas.SaveState();
RectF bounds =
this
.Bounds;
canvas.StrokeColor = Colors.Gray;
canvas.StrokeSize = 1f;
canvas.StrokeDashPattern =
new
float
[] { 5, 3 };
canvas.DrawRectangle(bounds);
canvas.RestoreState();
}
canvas.ConcatenateTransform(
this
.GetTransformMatrix());
StyleDraw(canvas, dirtyRect);
canvas.RestoreState();
}
//点集到线
public
static
PathF CreatePathF(PointF[] points,
bool
closed =
true
)
{
if
(points.Length == 0)
return
new
PathF();
PathF path =
new
PathF();
path.MoveTo(points[0]);
for
(
int
i = 1; i < points.Length; i++)
{
path.LineTo(points[i]);
}
if
(closed)
path.Close();
return
path;
}
protected
abstract
void
StyleDraw(ICanvas canvas, RectF dirtyRect);
protected
abstract
PointF[] GetPoints();
}
//长方形类
public
class
RectangleShape : Shape
{
public
static
readonly
BindableProperty CornerRadiusProperty =
BindableProperty.Create(nameof(CornerRadius),
typeof
(
float
),
typeof
(RectangleShape), 0f);
public
float
CornerRadius
{
get
=> (
float
)GetValue(CornerRadiusProperty);
set
=> SetValue(CornerRadiusProperty, value);
}
protected
override
PointF[] GetPoints()
{
return
new
PointF[]
{
new
PointF(X, Y),
// 左上
new
PointF(X + Width, Y),
// 右上
new
PointF(X + Width, Y + Height),
// 右下
new
PointF(X, Y + Height)
// 左下
};
}
protected
override
void
StyleDraw(ICanvas canvas, RectF dirtyRect)
{
// 绘制原始矩形（局部坐标）
canvas.FillRoundedRectangle(X, Y, Width, Height, CornerRadius);
canvas.DrawRoundedRectangle(X, Y, Width, Height, CornerRadius);
}
}
//椭圆形类
public
class
EllipseShape : Shape
{
//Length越大，性能要求越高，但是碰撞判断越精确。
public
static
readonly
BindableProperty LengthProperty =
BindableProperty.Create(nameof(Length),
typeof
(
int
),
typeof
(EllipseShape), 60);
public
static
readonly
BindableProperty RadiusXProperty =
BindableProperty.Create(nameof(RadiusX),
typeof
(
float
),
typeof
(EllipseShape), 0f);
public
static
readonly
BindableProperty RadiusYProperty =
BindableProperty.Create(nameof(RadiusY),
typeof
(
float
),
typeof
(EllipseShape), 0f);
public
int
Length
{
get
=> (
int
)GetValue(LengthProperty);
set
=> SetValue(LengthProperty, value);
}
public
float
RadiusX
{
get
=> (
float
)GetValue(RadiusXProperty);
set
=> SetValue(RadiusXProperty, value);
}
public
float
RadiusY
{
get
=> (
float
)GetValue(RadiusYProperty);
set
=> SetValue(RadiusYProperty, value);
}
protected
override
PointF[] GetPoints()
{
List<PointF> points =
new
List<PointF>();
float
radiusX = RadiusX == 0 ? Width / 2 : RadiusX;
float
radiusY = RadiusY == 0 ? Height / 2 : RadiusY;
float
centerX = X + radiusX;
float
centerY = Y + radiusY;
for
(
int
i = 0; i < Length; i++)
{
float
angle = i * (
float
)Math.PI / Length * 2f;
points.Add(
new
PointF(
centerX + radiusX * (
float
)Math.Cos(angle),
centerY + radiusY * (
float
)Math.Sin(angle)));
}
return
points.ToArray();
}
protected
override
void
StyleDraw(ICanvas canvas, RectF dirtyRect)
{
float
radiusX = RadiusX == 0 ? Width / 2 : RadiusX;
float
radiusY = RadiusY == 0 ? Height / 2 : RadiusY;
canvas.FillEllipse(X, Y, radiusX * 2, radiusY * 2);
canvas.DrawEllipse(X, Y, radiusX * 2, radiusY * 2);
}
}
//三角形类
public
class
TriangleShape : Shape
{
protected
override
PointF[] GetPoints()
{
return
new
PointF[]
{
new
PointF(X + Width / 2, Y),
// 顶点
new
PointF(X + Width, Y + Height),
// 右下角
new
PointF(X, Y + Height)
// 左下角
};
}
protected
override
void
StyleDraw(ICanvas canvas, RectF dirtyRect)
{
PathF path = CreatePathF(GetPoints());
canvas.FillPath(path);
canvas.DrawPath(path);
}
}
//线段或自定义类，支持SVG等
public
class
PathShape : Shape
{
public
static
readonly
BindableProperty DataProperty =
BindableProperty.Create(nameof(Data),
typeof
(
string
),
typeof
(PathShape),
null
);
public
static
readonly
BindableProperty IsClosedPathProperty =
BindableProperty.Create(nameof(IsClosedPath),
typeof
(
bool
),
typeof
(PathShape),
true
);
public
string
Data
{
get
=> (
string
)GetValue(DataProperty);
set
=> SetValue(DataProperty, value);
}
public
bool
IsClosedPath
{
get
=> (
bool
)GetValue(IsClosedPathProperty);
set
=> SetValue(IsClosedPathProperty, value);
}
protected
override
PointF[] GetPoints()
{
if
(Data !=
null
)
{
PointF[] points = PathBuilder.Build(Data).Points.ToArray();
for
(
int
i = 0; i < points.Length; i++)
{
points[i].X += X;
points[i].Y += Y;
}
return
points;
}
return
Array.Empty<PointF>();
}
protected
override
void
StyleDraw(ICanvas canvas, RectF dirtyRect)
{
PathF path = CreatePathF(GetPoints(), IsClosedPath);
canvas.FillPath(path);
canvas.DrawPath(path);
}
//分割线段
public
List<PointF[]> SplitAt(PointF point,
float
tolerance = 5f)
{
PointF[] points = GetPoints();
// 应用当前变换矩阵到所有顶点
Matrix3x2 transform = GetTransformMatrix();
for
(
int
i = 0; i < points.Length; i++)
{
points[i] = Transform(points[i], transform);
}
List<PointF[]> result =
new
List<PointF[]>();
if
(points.Length < 2)
{
// 点太少无法分割
return
result;
}
// 1. 查找最近的线段和分割点
float
minDistance =
float
.MaxValue;
int
splitIndex = -1;
PointF splitPoint = PointF.Zero;
bool
isClosingSegment =
false
;
// 检查所有线段（包括可能的闭合线段）
for
(
int
i = 0; i < points.Length - 1; i++)
{
CheckSegment(points[i], points[i + 1], i,
ref
minDistance,
ref
splitIndex,
ref
splitPoint, point);
}
// 如果是闭合路径，检查最后一段（从最后一个点到第一个点）
if
(IsClosedPath && points.Length > 1)
{
isClosingSegment = CheckSegment(points[points.Length - 1], points[0],
points.Length - 1,
ref
minDistance,
ref
splitIndex,
ref
splitPoint, point);
}
// 2. 如果没有找到在容差范围内的分割点
if
(minDistance > tolerance || splitIndex == -1)
{
return
result;
}
// 3. 执行分割
if
(isClosingSegment)
{
// 在闭合线段上分割
SplitClosingSegment(points, splitPoint, result);
}
else
{
// 在普通线段上分割
SplitRegularSegment(points, splitIndex, splitPoint, result);
}
return
result;
}
private
bool
CheckSegment(PointF a, PointF b,
int
index,
ref
float
minDistance,
ref
int
splitIndex,
ref
PointF splitPoint, PointF testPoint)
{
float
distance;
PointF projection = GetProjectionOnSegment(testPoint, a, b,
out
distance);
if
(distance < minDistance)
{
minDistance = distance;
splitIndex = index;
splitPoint = projection;
return
true
;
}
return
false
;
}
private
PointF GetProjectionOnSegment(PointF p, PointF a, PointF b,
out
float
distance)
{
Vector2 ap =
new
Vector2(p.X - a.X, p.Y - a.Y);
Vector2 ab =
new
Vector2(b.X - a.X, b.Y - a.Y);
float
magnitude = ab.LengthSquared();
if
(magnitude == 0)
{
distance = (
float
)Math.Sqrt(DistanceSquare(p, a));
return
a;
}
float
t = Math.Clamp(Vector2.Dot(ap, ab) / magnitude, 0, 1);
PointF projection =
new
PointF(
a.X + t * ab.X,
a.Y + t * ab.Y
);
distance = (
float
)Math.Sqrt(DistanceSquare(p, projection));
return
projection;
}
private
void
SplitRegularSegment(PointF[] points,
int
splitIndex,
PointF splitPoint, List<PointF[]> result)
{
// 第一部分：起点到分割点
List<PointF> part1 =
new
List<PointF>();
for
(
int
i = 0; i <= splitIndex; i++)
{
part1.Add(points[i]);
}
part1.Add(splitPoint);
// 第二部分：分割点到终点
List<PointF> part2 =
new
List<PointF>();
part2.Add(splitPoint);
for
(
int
i = splitIndex + 1; i < points.Length; i++)
{
part2.Add(points[i]);
}
result.Add(part1.ToArray());
result.Add(part2.ToArray());
}
private
void
SplitClosingSegment(PointF[] points, PointF splitPoint, List<PointF[]> result)
{
// 第一部分：起点到最后一个点 + 分割点
List<PointF> part1 =
new
List<PointF>(points);
part1.Add(splitPoint);
// 第二部分：分割点到起点
List<PointF> part2 =
new
List<PointF>();
part2.Add(splitPoint);
part2.Add(points[0]);
result.Add(part1.ToArray());
result.Add(part2.ToArray());
}
}
//图片
public
class
ImageShape : Shape
{
public
static
readonly
BindableProperty SourceProperty =
BindableProperty.Create(nameof(Source),
typeof
(ImageSource),
typeof
(ImageShape),
null
);
public
ImageSource Source
{
get
=> (ImageSource)GetValue(SourceProperty);
set
=> SetValue(SourceProperty, value);
}
private
IImage? image;
public
ImageShape()
{
Dispatcher.Dispatch(() =>
{
image = ConvertImageSourceToIImage(Source);
});
}
protected
override
PointF[] GetPoints()
{
return
new
PointF[]
{
new
PointF(X, Y),
// 左上
new
PointF(X + Width, Y),
// 右上
new
PointF(X + Width, Y + Height),
// 右下
new
PointF(X, Y + Height)
// 左下
};
}
protected
override
void
StyleDraw(ICanvas canvas, RectF dirtyRect)
{
if
(image !=
null
)
canvas.DrawImage(image, X, Y, Width, Height);
}
public
static
IImage? ConvertImageSourceToIImage(ImageSource imageSource)
{
try
{
// 1. 将 ImageSource 转换为 Stream
Stream? stream = GetStreamFromImageSource(imageSource);
// 2. 使用 PlatformImage 加载流
return
PlatformImage.FromStream(stream);
}
catch
(Exception ex)
{
Trace.WriteLine($
"转换失败: {ex.Message}"
);
return
null
;
}
}
private
static
Stream? GetStreamFromImageSource(ImageSource imageSource)
{
if
(imageSource
is
FileImageSource fileSource)
{
// 资源一定是"嵌入的资源"
Assembly assembly = Shell.Current.GetType().GetTypeInfo().Assembly;
return
assembly.GetManifestResourceStream(assembly.FullName?.Split(
','
).First() +
".Resources.Images."
+ fileSource.File);
}
else
if
(imageSource
is
StreamImageSource streamSource)
{
// 处理流
return
streamSource.Stream(CancellationToken.None).Result;
}
else
if
(imageSource
is
UriImageSource uriSource)
{
// 处理网络图片
using
var
httpClient =
new
HttpClient();
var
response = httpClient.GetAsync(uriSource.Uri).Result;
return
response.Content.ReadAsStreamAsync().Result;
}
Trace.WriteLine(
"不支持的ImageSource类型"
);
return
null
;
}
}
//文字
public
class
TextShape : Shape
{
[Flags]
public
enum
TextAttributes
{
None = 0,
Bold = 1 << 0,
Italic = 1 << 1,
Underline = 1 << 2,
Shadow = 1 << 3,
}
public
static
readonly
BindableProperty TextProperty =
BindableProperty.Create(nameof(Text),
typeof
(
string
),
typeof
(TextShape),
null
);
public
static
readonly
BindableProperty FontSizeProperty =
BindableProperty.Create(nameof(FontSize),
typeof
(
float
),
typeof
(TextShape), 16f);
public
static
readonly
BindableProperty FontColorProperty =
BindableProperty.Create(nameof(FontColor),
typeof
(Color),
typeof
(TextShape), Colors.Black);
public
static
readonly
BindableProperty FontFamilyProperty =
BindableProperty.Create(nameof(FontFamily),
typeof
(
string
),
typeof
(TextShape),
"Arial"
);
public
static
readonly
BindableProperty FontAttributesProperty =
BindableProperty.Create(nameof(FontAttributes),
typeof
(TextAttributes),
typeof
(TextShape), TextAttributes.None);
public
static
readonly
BindableProperty HorizontalAlignmentProperty =
BindableProperty.Create(nameof(HorizontalAlignment),
typeof
(HorizontalAlignment),
typeof
(TextShape), HorizontalAlignment.Left);
public
static
readonly
BindableProperty VerticalAlignmentProperty =
BindableProperty.Create(nameof(VerticalAlignment),
typeof
(VerticalAlignment),
typeof
(TextShape), VerticalAlignment.Center);
public
string
Text
{
get
=> (
string
)GetValue(TextProperty);
set
=> SetValue(TextProperty, value);
}
public
float
FontSize
{
get
=> (
float
)GetValue(FontSizeProperty);
set
=> SetValue(FontSizeProperty, value);
}
public
Color FontColor
{
get
=> (Color)GetValue(FontColorProperty);
set
=> SetValue(FontColorProperty, value);
}
public
string
FontFamily
{
get
=> (
string
)GetValue(FontFamilyProperty);
set
=> SetValue(FontFamilyProperty, value);
}
public
TextAttributes FontAttributes
{
get
=> (TextAttributes)GetValue(FontAttributesProperty);
set
=> SetValue(FontAttributesProperty, value);
}
public
HorizontalAlignment HorizontalAlignment
{
get
=> (HorizontalAlignment)GetValue(HorizontalAlignmentProperty);
set
=> SetValue(HorizontalAlignmentProperty, value);
}
public
VerticalAlignment VerticalAlignment
{
get
=> (VerticalAlignment)GetValue(VerticalAlignmentProperty);
set
=> SetValue(VerticalAlignmentProperty, value);
}
private
SizeF size = SizeF.Zero;
private
const
float
shadowOffset = 2;
protected
override
PointF[] GetPoints()
{
//canvas.GetStringSize存在bug，长宽反了
float
w = size.Height, h = size.Width * 1.2f;
return
new
PointF[]
{
new
PointF(X, Y),
// 左上
new
PointF(X + w, Y),
// 右上
new
PointF(X + w, Y + h),
// 右下
new
PointF(X, Y + h)
// 左下
};
}
protected
override
void
StyleDraw(ICanvas canvas, RectF dirtyRect)
{
//获取Text大小
Font font =
new
Font(FontFamily,
(
int
)(FontAttributes.HasFlag(TextAttributes.Bold) ? FontWeight.Bold : FontWeight.Regular),
(FontAttributes.HasFlag(TextAttributes.Italic) ? FontStyleType.Italic : FontStyleType.Normal));
size = canvas.GetStringSize(Text, font, FontSize,
this
.HorizontalAlignment,
this
.VerticalAlignment);
canvas.Font = font;
canvas.FontSize = FontSize;
SizeF rc = GetSizeF();
// 处理阴影（先绘制）
if
(FontAttributes.HasFlag(TextAttributes.Shadow))
{
canvas.FontColor =
new
Color(0, 0, 0, 0.5f);
canvas.DrawString(Text, X + shadowOffset, Y + shadowOffset / 2, rc.Width, rc.Height,
this
.HorizontalAlignment,
this
.VerticalAlignment);
}
// 主文本
canvas.FontColor = FontColor;
canvas.DrawString(Text, X, Y, rc.Width, rc.Height,
this
.HorizontalAlignment,
this
.VerticalAlignment);
// 处理下划线
if
(FontAttributes.HasFlag(TextAttributes.Underline))
{
canvas.StrokeColor = StrokeColor;
canvas.StrokeSize = StrokeThickness;
canvas.DrawLine(X, Y + rc.Height, X + rc.Width, Y + rc.Height);
}
}
private
SizeF GetSizeF()
{
PointF[] points = GetPoints();
return
new
SizeF()
{
Width = (
float
)Math.Sqrt(DistanceSquare(points[0], points[1])),
Height = (
float
)Math.Sqrt(DistanceSquare(points[0], points[3]))
};
}
}
|
Canvas类
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
[ContentProperty(nameof(Shapes))]
public
class
Canvas : GraphicsView, IDrawable
{
public
ObservableCollection<Shape> Shapes {
get
;
set
; } =
new
ObservableCollection<Shape>();
private
RectangleShape selection =
new
RectangleShape()
{
IsSelected =
false
,
StrokeDashPattern =
"5 3"
,
StrokeColor = Colors.Red
};
private
PointF v = PointF.Zero, w = PointF.Zero;
//支持单指或者双指手势
public
Canvas()
{
this
.Drawable =
this
;
this
.StartInteraction += OnTouchStarted;
this
.DragInteraction += OnTouchMoved;
this
.EndInteraction += OnTouchEnded;
}
private
void
OnTouchStarted(
object
? sender, TouchEventArgs e)
{
if
(e.Touches.Length == 0)
return
;
else
if
(e.Touches.Length ==1)
{
v = e.Touches[0];
if
(Shapes.Any((shape) => shape.HitTest(v) && shape.IsSelected))
return
;
}
else
if
(e.Touches.Length == 2)
{
v = e.Touches[0];
w = e.Touches[1];
}
foreach
(Shape shape
in
Shapes)
{
if
(e.Touches.Any((p) => shape.HitTest(p)))
{
shape.IsSelected =
true
;
}
else
{
shape.IsSelected =
false
;
}
}
//如果没有任何选中且是单点，则启动选择框
if
(!Shapes.Any((shape) => shape.IsSelected) && e.Touches.Length == 1)
{
selection.IsSelected =
true
;
selection.X = e.Touches[0].X;
selection.Y = e.Touches[0].Y;
}
}
private
void
OnTouchMoved(
object
? sender, TouchEventArgs e)
{
if
(e.Touches.Length == 0)
return
;
else
if
(e.Touches.Length == 1)
{
//选择框
if
(selection.IsSelected)
{
selection.Width = e.Touches[0].X - selection.X;
selection.Height = e.Touches[0].Y - selection.Y;
foreach
(
var
shapre
in
Shapes)
{
if
(selection.HitTest(shapre))
shapre.IsSelected =
true
;
}
}
else
{
var
delta = GetOffsetPoint(v, e.Touches[0]);
foreach
(
var
shape
in
Shapes)
{
if
(shape.IsSelected)
{
shape.X += delta.X;
shape.Y += delta.Y;
}
}
v = e.Touches[0];
}
}
else
if
(e.Touches.Length == 2)
{
if
(!selection.IsSelected)
{
PointF p3 = e.Touches[0], p4 = e.Touches[1];
float
factor = GetZoomFactor(v, w, p3, p4);
foreach
(
var
shape
in
Shapes)
{
if
(shape.IsSelected)
{
shape.X *= factor;
shape.Y *= factor;
}
}
v = p3;
w = p4;
}
}
this
.Invalidate();
}
private
void
OnTouchEnded(
object
? sender, TouchEventArgs e)
{
v = PointF.Zero;
w = PointF.Zero;
selection.IsSelected =
false
;
this
.Invalidate();
}
private
PointF GetOffsetPoint(PointF p1, PointF p2)
{
return
new
PointF(p2.X - p1.X, p2.Y - p1.Y);
}
private
float
GetZoomFactor(PointF p1, PointF p2, PointF p3, PointF p4)
{
float
current = (
float
)Math.Sqrt(Shape.DistanceSquare(p3, p4));
float
previous = (
float
)Math.Sqrt(Shape.DistanceSquare(p1, p2));
return
previous == 0 ? 1 : current / previous;
}
public
void
Draw(ICanvas canvas, RectF dirtyRect)
{
foreach
(
var
shape
in
Shapes)
{
// 绘制形状
shape.Draw(canvas, dirtyRect);
}
if
(selection.IsSelected)
selection.Draw(canvas, dirtyRect);
}
}
|
xmal使用，这里我创建了一个Canvas.xaml。
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiViews.MauiDemos.Book._03.Canvas" Title="Canvas" WidthRequest="800" HeightRequest="800"> <Canvas> <RectangleShape FillColor="Blue" StrokeColor="Red" StrokeThickness="3" CornerRadius="20" X="50" Y="50" Width="150" Rotation="30"/> <EllipseShape X="300" Y="50" FillColor="Blue" StrokeColor="Red" StrokeThickness="3" RadiusX="80" Rotation="45"/> <TriangleShape X="500" Y="50" FillColor="Blue" StrokeColor="Red" StrokeThickness="3" Rotation="15"/> <PathShape X="50" Y="200" FillColor="Blue" StrokeColor="Red" StrokeThickness="3" ScaleX="0.8" Rotation="60" Data="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"/> <ImageShape X="150" Y="200" FillColor="Blue" StrokeColor="Red" StrokeThickness="3" Rotation="30" Width="200" AspectRatio="1.2" Source="dotnet_bot.png"/> <TextShape Text="Hello C# Maui，自定义" X="350" Y="250" FontAttributes="Italic,Bold,Underline,Shadow" Rotation="30" ScaleX="1.2" FontColor="Blue" StrokeColor="Red"/> </Canvas> </ContentPage>
运行效果。选中部分，部分不选中。虚框是外接矩形。
扫一扫
1017
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
