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

简介: 前端 HTML5 Svg 画板(支持视频、图片上涂鸦,支持缩放、修改、颜色、复选...)

image.png

  • 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'
}
相关文章
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
40 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
73 6
HTML 颜色值2
本列表展示了按十六进制(Hex)颜色值排序的常见颜色,包括黑色、蓝色、绿色、红色等,共 140 种颜色,方便快速查找和使用。
HTML 颜色4
Web安全色是指在早期计算机时代为了确保颜色在不同设备上的一致性而推荐使用的216种特定颜色。这些颜色能在256色模式下正确显示,避免因操作系统保留的颜色导致的显示问题。尽管现代计算机已能处理数百万种颜色,但了解这216种颜色仍有一定价值。
HTML 颜色值1
HTML颜色值由红、绿、蓝三色组成,使用十六进制表示。每个颜色分量范围从00到FF,颜色值以#开头,可采用3位或6位表示法。例如,黑色为#000或#000000,红色为#F00或#FF0000。
|
6月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
85 1
前端基础(十七)_HTML5新特性
|
5月前
|
前端开发 JavaScript 编译器
不走弯路,纯前端如何把图片导出成视频!
【10月更文挑战第3天】不走弯路,纯前端如何把图片导出成视频!
207 3
HTML 颜色13
灰暗色调展示了从纯黑到纯白的渐变色,共33种颜色。每种颜色以16进制和RGB格式表示,适用于网页设计、UI设计等领域。
HTML 颜色12
通过红、绿、蓝三色(RGB)从0至255的变化组合,可以产生1600万种不同颜色。下表展示了红色从0到255逐渐增加时的颜色变化,绿色和蓝色值固定为0。
HTML 颜色1
HTML颜色由红、绿、蓝三色混合而成,通过十六进制表示。每种颜色的值范围从0(#00)到255(#FF)。例如,黑色为#000000(rgb(0,0,0)),白色为#FFFFFF(rgb(255,255,255))。

热门文章

最新文章