前端 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'
}

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

Android WebView 支持H5图片上传input type=file
2019独角兽企业重金招聘Python工程师标准>>> Android WebView 缓存处理 Android WebView 支持H5图片上传<input type=&qu ...
能在图片上涂鸦的软件有哪些？分享几种好用涂鸦工具
涂鸦可以增加趣味性.在照片上涂鸦可以增加趣味性,让照片更加有趣.无论是在旅行照片中添加一些有趣的涂鸦,还是在生活照片中添加一些幽默的涂鸦,都可以让照片更具有趣味性.很多小伙伴不清楚怎么在照片上进行涂鸦 ...
**微信小程序图片上传+后台PHP修改图片名称**
微信小程序图片上传+后台PHP修改图片名称前端代码:比较随意 <view class="weui-uploader"><view class="img ...
ps批量修改名片文字_怎么修改图片上的文字修改图片文字比如名片图片上面的地址需要修改下...
现在在网络上下载的图片是不是都对有文字水印的咧是不,那么怎么修改图片上的文字呢,修改图片文字比如名片图片上面的地址需要修改下这些怎么完成?OK ,今天就让小编来给大伙科普一下,其实要做到真正的无痕迹修 ...
Android作业：设计一个能在图片上涂鸦的程序
一.内容设计一个能在图片上涂鸦的程序二.实现 activity_main.xml MainActivity.java HandWrite.java
[批量重命名工具] 批量图片识别文字来命名文件名，很多网友想看批量图片识别成文字，用图片上的文字来修改文件名，今天它来了
很多网友想看批量图片识别成文字,用图片上的文字来修改文件名,今天他来了因为不解决就得手动挨个挨个输入然后把文件命名好今天又一个文件需求是这样的图上有姓名文字,要识别出来改成每一张图跟这个一样,有 ...
html长图转换成pdf,支持把各类文档转换成 HTML5(SVG)接口、长图片、PDF 。word转pdf、word转html5、pdf转网页html5、pdf转图片的接口...
详情请到九云图官网了解一下.https://server.9yuntu.com/yuntu/resource/website/api.html 把 OFFICE / PDF / CAD 等文档转换成 ...
为什么手机上传图片这么慢前端_解决BootStrap Fileinput手机图片上传显示旋转问题_心病_前端开发者...
最近因为项目需要用到了bootstrap fileinput的插件,在使用苹果手机上传图片预览时,发现图片方向和手机本地存储方向不一致问题.后来通过查询资料了解图片具有EXIF(Exchangeabl ...
小程序_图片剪切功能（支持多图片上传）
前端图片剪切上传功能是常见的功能,在开发过程中,研发一个这样的功能要花的时间也会很多,现在把一个研发好了的图片剪切插件发出来.支持剪切和大小缩放. wxml 1  ...

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

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

最新文章

热门文章