（二十四）绘图区域的布局和预览模块的后台实现

1.编写相机显示图像到前端xaml的实体类

CameraDisplayModel给CameraProcessModel做个搬运
订阅 CameraProcessModel的观察者，图片发生变化时，进行处理，把CameraProcessModel里面目前缓存区放置的图片写到CameraDisplayModel的双缓存区中
类似探测器

然后预览区显示图像，怎么拿到图片，通过构造函数引入，但是不能直接在WPF中显示，需要进行转换

2.将Bitmap写入到WriteableBitmap

2.1 创建BitmapSourceGDI类

BitmapSourceGDI提供了bitmap和非托管数组两种格式对WriteableBitmap的转换，WriteableBitmap是可以直接绑定到WPF中且用户可以直接访问操作图像

rectangle.Intersect 方法修改 rectangle，使其变为仅包含两个矩形共有部分的矩形。如果两个矩形不相交，rectangle 将会变成一个空的矩形，其宽度和高度都是0。

2.2 显示

在主线程观察cameraDisplayModel的缓冲区是否变化

触发方法

前台页面绑定

3.相机预览图像的缩放与平移操作

与image模块的实现相同

4.创建绘图工具模块

用户控件库
下载reactiveui，fody，wpf，prism.unity.mahapp.metro
生成事件命令，并添加引用
模块配置类
建包views，viewmodels
创建view和vm并绑定

主模块添加加载依赖

把页面注册

之前的区域在PrimaryView处

5.设计绘图工具界面及CheckBox样式开发

视觉树：

6.设计文字输入界面

效果

7.设计画笔的粗细按钮和颜色按钮

画笔粗细

颜色选择

Separator控件用于在用户界面中创建一个视觉分隔线，以区分不同的UI元素或部分。通过在XAML中使用此标签，可以在布局中加入分隔线，从而改善应用程序的视觉结构和用户体验。

效果：

8.编写画笔粗细枚举类型并绑定到RadioButton按钮

画笔粗细

画笔颜色;

9.编写鼠标操作类型及业务接口绑定到CheckBox

在core的枚举包

/// <summary>
/// 鼠标操作类型
/// </summary>
public  enum MouseOperationType
{
    /// <summary>
    /// 矩形
    /// </summary>
    DrawRectangle,
    /// <summary>
    /// 椭圆
    /// </summary>
    DrawEllipse,
    /// <summary>
    /// 箭头
    /// </summary>
    DrawArrow,
    /// <summary>
    /// 画笔
    /// </summary>
    DrawPen,
    /// <summary>
    /// 输入文字
    /// </summary>
    DrawText,
    /// <summary>
    /// 框选
    /// </summary>
    DrawSelect,
}

创建一个画图模型：

继承

实现

DrawToolViewModel构造函数引入两个模型，前台页面绑定到checkbox
IsChecked="{Binding MouseOperationProvider.MouseOperationType, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter={x:Static enums:MouseOperationType.DrawRectangle}}"
单选框的画笔粗细和颜色同样可以用上述绑定