前端 HTML5 Svg 画板（支持视频、图片上涂鸦，支持缩放、修改、颜色、复选...）

• GitHub 地址

• 支持 视频、图片 上涂鸦，做标记

• 画板功能支持 矩形、圆形、椭圆、箭头、直线、文本，支持 缩放、修改、调整字号颜色、移动位置....，画板数据支持上传保存，后续传入重新复原。

• 画板可配置属性

  // 配置对象,配置对象支持为每个笔画类型进行单独配置,只需要在切换时修改即可
  this.option = {
    // 当前画笔类型
    // ['rect(矩形)', 'line(直线)', 'circle(圆形)' 'ellipse(椭圆)', 'text(文本)', 'brush(画笔)',  'arrow(箭头)']
    strokeType: option.strokeType,
    // 画笔颜色
    strokeColor: option.strokeColor || '#F13E48',
    // 画笔宽度
    strokeWidth: option.strokeWidth || 1,
    // 文本字号
    fontSize: option.fontSize || 14,
    // 字体名称
    fontFamily: option.fontFamily || 'monospace',
    // 文本粗细
    fontWeight: option.fontWeight || 400,
    // 渲染文字行间距（行高 + lineSpace）
    fontLineSpace: option.lineSpace || 5,
    // 最大高度（画板的最大高度尺寸）
    // 有画板的最大高度尺寸 'text(文本)' 才会支持缩放，否则不会进行缩放，比例按 1 处理，其他笔画类型不受影响。
    maxHeight: option.maxHeight || 0,
    // 是否可以编辑
    isEdit: option.isEdit || true,
    // 是否填充颜色（箭头类型）
    isFill: option.isFill || true,
    // 显示编辑矩形框（目前支持：'text(文本)' 其他画笔类型不需要支持）
    isShowEditRect: option.isShowEditRect || true,
    // 是否支持窗口缩放 重新调整元素坐标
    isResize: option.isResize || true,
    // 是否允许鼠标在编辑或绘制过程中离开画板区域，离开则算停止本次手势，默认不允许
    isAllowLeaveEditArea: option.isAllowLeaveEditArea || false,
    // 文本框贴贴文本内容排版优化（false：原格式，true：优化格式，去除多余的空格）
    isPasteTypesetting: option.isPasteTypesetting || true,
    // 有输入框时，是否在失去焦点的时候进行移除，默认(false)是再次点击画板才会移除
    isInputBlurRemove: option.isInputBlurRemove || false,
    // 输入框边框提示文字
    inputPlaceholder: (typeof option.inputPlaceholder === 'string') ? option.inputPlaceholder : '请输入文字',
    // 输入框在输入过程中文字后面预留宽度，以防输入时字符超过出现换行
    inputOffsetW: option.inputOffsetW || 4,
    // 输入框边框大小（'text(文本)'进入编辑状态后，操作矩形边框宽度）
    inputBoderWidth: option.inputBoderWidth || 1,
    // 输入框边框上线左右离文字的间距（'text(文本)'进入编辑状态后，操作矩形边框内间距）
    inputPadding: option.inputPadding || 5,
    // 输入框边框圆角
    inputBorderRadius: option.inputBorderRadius || 0,
    // 输入框边框样式
    inputBorderStyle: option.inputBorderStyle || 'solid',
    // 进入编辑状态后，操作圆圈边框宽度
    editBoderWidth: option.inputBoderWidth || 1,
    // 进入编辑状态后，操作圆圈的半径
    editRadius: option.editRadius || 4,
    // 进入编辑状态后，操作圆圈的内部圆心填充颜色
    editFillColor: option.editFillColor || '#fff',
    // 创建时鼠标移动多少距离才算正式画笔画，以免点击之后误操作
    effectiveOffset: option.effectiveOffset ||  { x: 2, y: 2 },
    // 新建元素鼠标样式(画板默认鼠标样式)
    editNewCursor: 'crosshair',
    // 移动元素鼠标样式
    editMoveCursor: 'grab'
  }