Flowchart.NET v6.1公测版本新功能：可调节的控制点创建自定义公式的形状

最新推荐文章于 2020-12-25 01:09:54 发布

cuicaoyong3577

最新推荐文章于 2020-12-25 01:09:54 发布

阅读量103

点赞数

文章标签：嵌入式前端 ViewUI

在这篇文章中，我们将展示如何使用可调节的控制点创建自定义公式的形状。形状控制点是Flowchart.NET v6.1中的一个新功能，目前是在公测阶段。

形状公式定义使用脚本，调用以下功能之一绘制节点的形状。

MoveTo (x,y)	将当前位置移动到指定的点，无需绘制。
LineTo (x,y)	从当前位置到指定的点绘制一条线。
BezierTo (x1,y1,x2,y2,x3,y3)	绘制Bezier曲线从当前位置到（X3，Y3），把（X1，Y1）和（x2，y2）作为控制点。
ArcTo (x,y,largeArc,clockwiseArc,rx,ry)	绘制弧形，从指定点（x，y），其中rx和ry是的椭圆半径和弧标志是布尔值，可指定四种可能的圆弧绘制。

例如，下面的公式定义了一个圆角矩形，使用直线和圆弧，并期望获得的“半径”控制点参数，将控制圆角半径：

            // a rounded rectangle shape, with an arc at each corner 
          
            string roundRect = @" 
          
                r = Min(Width / 2, radius.X); 
          
                MoveTo(r, 0); 
          
                LineTo(Width - r, 0); 
          
                ArcTo(Width, r, false, false, r, r); 
          
                LineTo(Width, Height - r); 
          
                ArcTo(Width - r, Height, false, false, r, r); 
          
                LineTo(r, Height); 
          
                ArcTo(0, Height - r, false, false, r, r); 
          
                LineTo(0, r); 
          
                ArcTo(r, 0, false, false, r, r); 
          
             ";

当创建一个形状实例时，我们必须添加ShapeControlPoint的对象定义半径参数及其约束条件。下面的代码指定默认的半径为5，允许的最小值和最大值分别为1和15，通过设置minY 和 maxY 为0，防止控制点垂直移动。

             var myRect = new Shape(roundRect, "MyRect"); 
           
             // add a control point for the 'radius' parameter 
           
             myRect.ControlPoints.Add(new ShapeControlPoint( 
           
                 "radius", 5, 1, 15, UnitType.Fixed, 0, 0, 0, UnitType.Fixed));

下面是另一个例子，定义了一个带有两个参数的控制锚臂的前端的锚形状。

         // an anchor shape, with two arcs outlining each anchor arm 
       
         string anchor = @" 
       
             r = Width / 3; 
       
             y1 = p1.Y * Height / 100; 
       
             y2 = p2.Y * Height / 100; 
       
             MoveTo(Width / 2, Height); 
       
             MoveTo(Width / 2 + 3, Height - 5); 
       
             ArcTo(Width, y2, false, true, r, r); 
       
             ArcTo(Width / 2 + 3, Height - 10, false, false, r, r); 
       
             LineTo(Width / 2 + 3, 0); 
       
             LineTo(Width / 2 - 3, 0); 
       
             LineTo(Width / 2 - 3, Height - 10); 
       
             ArcTo(0, y1, false, false, r, r); 
       
             ArcTo(Width / 2 - 3, Height - 5, false, true, r, r); 
       
             LineTo(Width / 2, Height); 
       
          "; 
       
         var myAnchor = new Shape(anchor, "MyAnchor"); 
       
         // add control points at the tips of anchor arms 
       
         myAnchor.ControlPoints.Add(new ShapeControlPoint( 
       
             "p1", 0, 0, 0, UnitType.Percentage, 55, 50, 80, UnitType.Percentage)); 
       
         myAnchor.ControlPoints.Add(new ShapeControlPoint( 
       
             "p2", 100, 100, 100, UnitType.Percentage, 55, 50, 80, UnitType.Percentage));

下面列出了一些额外的功能，你可以从形状脚本中调用。

PI()	返回PI的值。
Abs(x)	返回x的绝对值。
Atn(x)	返回的角度，弧度测量，其正切是指定数字。
Cos(x)	返回指定角度的余弦值。
Acos(x)	返回角度的余弦值是指定数字。
Exp(x)	返回e的额定功率。
Log(x)	返回自然（底数e）指定值的对数
Pow(x,power)	返回指定数量提高到规定的电源。
Sin(x)	返回指定角度的正弦值。
Asin(x)	返回角度的正弦是指定数字。
Sqrt(x)	返回一个数的平方根。
Tan(x)	返回指定角度的正切值。
Min(x,y)	返回两个数字中较小的一个。
Max(x,y)	返回两个数字中较大的一个。