canvas绘图创建文字，画圆等(zrender插件)
Hello, ZRender!
欢迎使用画图工具！ 你可以在左边的画板上绘图。
请设置合适的线宽：
/** ---全局变量---*/
var zr;
// 设置当前操作类型为移动
var type = "move";
// 当前操作元素对象
var currentObj = null;
var position = {};
/** ------*/
$(function () {
// 切换按钮选中样式
$(".btn").click(function () {
$(this).addClass('active');
$(this).siblings().removeClass('active');
// 修改当前操作类型
if (typeof ($(this).attr("data-type")) != "undefined") {
type = $(this).attr("data-type");
}
isMove(type);
});
// 初始化zrender
zr = zrender.init(document.getElementById('main'));
$('#main').mousedown(function (e) {
// console.log('canvas鼠标按下事件');
let element = {};
let shape = {};
let style = {};
position.x = e.offsetX;
position.y = e.offsetY;
switch (type) {
case 'circle':
// console.log('创建圆形');
shape.cx = position.x;
shape.cy = position.y;
shape.r = 0;
style.fill = "rgba(255,255,255,0)";
style.stroke = "#ff0000";
element.shape = shape;
element.style = style;
let circle = new zrender.Circle(element);
circle.on('click', function () {
// console.log('点击获取颜色');
$("#element-color").val(style.stroke);
$('#element-number').val(this.style.lineWidth);
currentObj = this;
// zr.addHover(this);
// 创建动画
// this.animate('style', true)
// .when(500, { opacity: 0 })
// .when(1000, { opacity: 1 })
// .done(function () {
// // Animation done
// })
// .start()
}).on('mousewheel', function (ev) {
var e = (ev || event).wheelDelta * 3;
this.attr('shape', this.shape.r += e);
zr.refresh();
});
currentObj = circle;
zr.add(circle);
break;
case 'text':
// console.log('创建文字');
guidance(position);
break;
default:
break;
}
});
$('#main').mousemove(function (e) {
// console.log('canvas鼠标移动事件');
if (currentObj == null) {
return;
}
switch (type) {
case 'circle':
// console.log('创建圆形');
currentObj.attr('shape', { r: Math.sqrt(Math.pow(currentObj.shape.cx - e.offsetX, 2) + Math.pow(currentObj.shape.cy - e.offsetY, 2)) });
break;
default:
break;
}
});
$('#main').mouseup(function () {
if (type == "move") return;
currentObj = null;
});
// 监听颜色选择器的颜色改变事件
$('#element-color').change(function () {
if(typeof(currentObj.__proto__) == "null") return;
if (currentObj.__proto__.type == "text") currentObj.attr('style', { textFill: this.value });
if (currentObj.__proto__.type == "circle") currentObj.attr('style', { stroke: this.value });
});
// 监听线宽输入框的改变事件
$('#element-number').change(function () {
if (currentObj.__proto__.type == "circle") currentObj.attr('style', { lineWidth: this.value });
});
// 监听确定按钮事件
$('#yes').click(function () {
// 删除当前闪烁的line
if (preLine) zr.remove(preLine);
// 创建文字
let text = new zrender.Text({
style: {
x: position.x,
y: position.y,
textFill: '#ff0000',
text: $('#input-content').val()
}
}).on('click', function () {
$('#element-color').val(this.style.textFill);
currentObj = this;
}).on('mousewheel', function (ev) {
var e = (ev || event).wheelDelta * 1;
this.attr('shape', this.style.fontSize += e);
zr.refresh();
});
currentObj = text;
zr.add(text);
$('#input-text').hide();
$('#input-content').val("");
});
});
// 根据类型设置元素是否可以移动
function isMove(type) {
if (type == "move") {
for (let i of zr.storage._displayList) {
i.draggable = true;
}
} else {
for (let i of zr.storage._displayList) {
i.draggable = false;
}
currentObj = null;
}
}
// 创建文字引导标志
var preLine;
function guidance(position) {
// 在画板上点击时要删除上一个创建的闪烁line
if (preLine) zr.remove(preLine);
let line = new zrender.Line({
style: {
stroke: "rgba(0,0,0,1)",
fill: "#000",
lineWidth: 2
},
shape: {
x1: position.x,
y1: position.y,
x2: position.x,
y2: position.y + 20
}
});
line.animate('style', true).when(500, { opacity: 1 }).when(1000, { opacity: 0 }).start();
preLine = line;
zr.add(line);
let pos = document.getElementById('main').getBoundingClientRect();
$('#input-text').show().offset({ top: pos.top + position.y + 40, left: pos.left + position.x - 100 });
}将引入 Bootstrap 样式表的 标签复制并粘贴到 中，并放在所有其他样式表之前。
Bootstrap 中的许多组件需要依赖 JavaScript 才能运行。具体来说，他们依赖的是 jQuery、Popper.js 以及我们自己开发的 JavaScript 插件。具体操作就是将下列
zrender下载地址
https://github.com/ecomfe/zrender