控件使用文档

飞道科技

画板

Tag

必须设置控件显示为块级元素,且需要指定控件的宽高。 依赖Jquery,不限制版本

<fd-w000019 id='widget-001' style="display:block;width:300px;height:300px;">
</fd-w000019>

Attributes

max-image-size-kb

允许插入图片和背景图的限制大小,单位kb

default-image

画板默认显示的图片,默认没图片

lang

语言, 默认为中文。可选择(en,cn)等

lock

锁定画板,禁止滚轮的使用

pencil-color

铅笔颜色,(“#000”,”#0366d6”)等

eraser-size

橡皮擦大小,不写默认为3像素值

plugins

设置指定的工具选项/绘图工具/设置,必填项 plugins=”arrowoneside,arrowtwoside,backgroundimage,brushsize,circle,color,colorhtml5,eraser,fullscreenmodebutton,image,imagecrop,line,linewidth,minimizebutton,opacityoption,openpopupbutton,overcanvaspopup,pencil,polygon,rectangle,shapeborder,shapecontextmenu,strokewidth,text,textalign,textbackgroundcolor,textcolor,textdecoration,textfontfamily,textfontsize,textfontstyle,textfontweight,textlineheight,togglevisibilitybutton,triangle,zoom” 详细官网地址https://github.com/carstenschaefer/DrawerJs/wiki

Methods

close_canvas()

关闭画板

get_image()

返回值:

html: string

把画板的内容导出为图片,格式为base64字符串。

get_canvas()

返回值:

html: string

把画板的内容导出为序列化的canvas数据。

set_background_image_from_url()

通过url设置画板背景图

参数:

  1. url: 图片路径【string】
  2. position: 图片位置,可选值( ‘stretch’, ‘center’, ‘stretch’, ‘top-left’, ‘top-right’, ‘bottom-left’, ‘bottom-right’)

set_canvas()

参数:

序列化的canvas数据【String】

返回值:

设置画板的内容。

start_edit()

开始编辑。

stop_edit()

停止编辑。调用之后,鼠标点击画板没有反应。若要解除限制请调用start_edit()

Events

fdwe-ready

画板初始化完成的事件

fdwe-after-render

每次渲染之后都会触发fdwe-after-render事件,包括设置画板背景图。

Example

html

<p>画板</p>
<br>
<fd-w000019 id='widget-001' lang='cn' max-image-size-kb='1024' plugins="pencil,eraser,text,line,arrowoneside,arrowtwoside,triangle,rectangle,circle,image,imagecrop,backgroundimage,polygon,colorhtml5,color,shapeborder,brushsize,opacityoption,linewidth,strokewidth,shapecontextmenu,overcanvaspopup,openpopupbutton,minimizebutton,togglevisibilitybutton,fullscreenmodebutton,zoom,textlineheight,textalign,textfontfamily,textfontsize,textfontweight,textfontstyle,textdecoration,textcolor,textbackgroundcolor" default-image='//gitee.com/uploads/6/1356006_MaShizhen2020.png?1523670711' style="display:block;width:800px;height:500px;">
</fd-w000019>
<input type="button" id="set" value="设置画板内容" />
<input type="button" id="get" value="获取画板内容" />
<input type="button" id="get_img" value="获取图片" />
<img id='img' src='' alt="">
<textarea id='textarea'></textarea>

js

const w = document.querySelector('#widget-001');
const get = document.querySelector('#get');
const get_img = document.querySelector('#get_img');
const set = document.querySelector('#set');
const img = document.querySelector('#img');
const stop = document.querySelector('#stop');
const textarea = document.querySelector('#textarea');

get.addEventListener('click', () => {
	const c = w.get_canvas();
	console.log(c);
	localStorage.setItem('test', c);
	textarea.innerHTML = c;
});
set.addEventListener('click', () => {
	const c = localStorage.getItem('test');
	w.set_canvas(c);
});

get_img.addEventListener('click', () => {
	const i = w.get_image();
	img.src = i;
});