前言
接着上週寫的截圖控件繼續更新 繪製箭頭。
1.WPF實現截屏「仿微信」
2.WPF 實現截屏控件之移動（二）「仿微信」
3.WPF 截圖控件之伸縮(三) 「仿微信」
4.WPF 截圖控件之繪製方框與橢圓(四) 「仿微信」
正文
一、首先接着ScreenCut繼續發電。
1）繪製箭頭因爲需要只修改箭頭的尾部頂部不修改大小所以需要兩個Path
需要定義Grid容器分爲兩列第一列 尾部 寬度設置***** 第二列設置固定寬度15 。
<ControlTemplate x:Key="PART_DrawArrow" TargetType="{x:Type Control}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="15"/>
</Grid.ColumnDefinitions>
<Path Data="{StaticResource PathArrowBranches}"
Fill="{TemplateBinding Background}" Height="8"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="0,0,-7,0"/>
<Path Data="{StaticResource PathArrow}"
Fill="{TemplateBinding Background}"
Width="15" Height="15"
Stretch="Fill"
Grid.Column="1"/>
</Grid>
</ControlTemplate>
2）依據鼠標起點PART_DrawArrow設置Left與Top的位置，
接着設置轉換RenderTransformOrigin中心點爲new Point(0, .5) 鼠標移動的角度賦值給RotateTransform.Angle就可以讓箭頭部跟着鼠標旋轉
同時還需去修改controlArrow的寬度在修改寬度的時候這裏當你繪製的是斜線或者角度就需要求平方根給寬。
void DrawArrowControl(Point current)
{
CheckPoint(current);
if (screenCutMouseType != ScreenCutMouseType.DrawArrow)
return;
var drawArrow = new Rect(pointStart, current);
if (controlArrow == null)
{
controlArrow = new Control();
controlArrow.Background = _currentBrush == null ? Brushes.Red : _currentBrush;
controlArrow.Template = controlTemplate;
_canvas.Children.Add(controlArrow);
Canvas.SetLeft(controlArrow, drawArrow.Left);
Canvas.SetTop(controlArrow, drawArrow.Top - 7.5);
}
var rotate = new RotateTransform();
var renderOrigin = new Point(0, .5);
controlArrow.RenderTransformOrigin = renderOrigin;
controlArrow.RenderTransform = rotate;
rotate.Angle = ControlsHelper.CalculeAngle(pointStart, current);
var x = current.X - pointStart.X;
var y = current.Y - pointStart.Y;
var width = Math.Sqrt(Math.Pow(x, 2) + Math.Pow(y, 2));
controlArrow.Width = width;
}
3）根據兩個點獲取角度代碼
private double CalculeAngle(Point start, Point arrival)
{
var radian = Math.Atan2((arrival.Y - start.Y), (arrival.X - start.X));
var angle = (radian * (180 / Math.PI) + 360) % 360;
return angle;
}
