zrenderを使用して基本図形を描画する
22247 ワード
zrenderに基づいてcanvasで基本図形を描画する
demo1
var main = echarts.init(document.getElementById('main'));
var option = {
title:{
text:'ECharts demo'
},
legend:{
data:[' ']
},
xAxis:{
data:[" "," "," "," "," "," "]
},
yAxis:{},
series:[{
name:' ',
type:'bar',
data:[5,20,36,10,10,20]
}]
};
main.setOption(option);
var canvas1 = document.getElementById("mycv");
var text= document.getElementById("text");
var btn = document.getElementById("btn");
var arr=[];
var imgs=[];//canvas
var img;//
btn.onclick = function(){
var value = text.value;
if(canvas1.getContext){
var ctx = canvas1.getContext("2d");
ctx.font = "bold 30px arial";
ctx.fillStyle="black";
ctx.fillText(value,150,150);
}
}
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
let reader = new FileReader();
reader.readAsDataURL(document.querySelector("#file").files[0]);
reader.onload = function (e) {
let result = e.target.result; // base64
img = new Image();
img.src = result; // image base64
img.onload = function () {
if(canvas1.getContext){
var ctx = canvas1.getContext("2d");
ctx.drawImage(img, 0, 0, 100, 100);
arr.push(ctx.getImageData(0, 0, canvas1.width, canvas1.height));
imgs.push([img,0,0,100,100]);
}
}
};
}
canvas1.onmousedown = function (e) {
let ax, ay, x, y;
canvas1.onmousemove = function (e) {
x = e.clientX;
y = e.clientY;
arr.pop();
imgs.pop();
ctx = canvas1.getContext("2d");
// //
ctx.clearRect(0, 0, canvas1.width, canvas1.height);
// if (arr.length != 0) {
// ctx.putImageData(arr[arr.length - 1], 0, 0, 0, 0, canvas1.width, canvas1.height);
// }
imgs.forEach(function(item, index){
ctx.drawImage(item[0], item[1], item[2],item[3],item[4]);
});
ctx.drawImage(img, x-50, y-250, 100, 100);
arr.push(ctx.getImageData(0, 0, canvas1.width, canvas1.height));
imgs.push([img,x-50, y-250, 100, 100]);
};
canvas1.onmouseup = function () {
canvas1.onmousemove = null;
canvas1.onmouseup = null;
};
}
var type = "pen";//
// ，
var objs = [];
var canvas;
var zr;
//
function setType(t){
type=t;
//
var operate = document.getElementById("operate");
switch(t){
case "img":
operate.innerText=" ";
break;
case "pen":
operate.innerText=" ";
break;
case "line":
operate.innerText=" ";
break;
case "circle":
operate.innerText=" ";
break;
case "rect":
operate.innerText=" ";
break;
case "isogon":
operate.innerText=" ";
break;
case "":
operate.innerText=" ";
break;
}
// ，
objs = zr.storage._displayList;
if(type == ""){
for (let index = 0; index < objs.length; index++) {
var tmpobj = objs[index];
objs[index].attr({"draggable":true})
}
} else{
for (let index = 0; index < objs.length; index++) {
var tmpobj = objs[index];
objs[index].attr({"draggable":false})
}
}
zr.refresh();
}
window.onload = function() {
var btn1 = document.getElementById("btn1");
var saveAndClear = document.getElementById("saveAndClear");
var clear = document.getElementById("clear");
var load = document.getElementById("load");
var undo = document.getElementById("undo");
canvas = document.getElementById('mycv');
zr = zrender.init(canvas);
var obj;//
var penline=[];
var objParam =[];//
var s;//
// ，
var objsHistory=[];
//
saveAndClear.onclick = function(){
objs = zr.storage._displayList;//
for (let index = 0; index < objs.length; index++) {
var elementParam = [];
var element = objs[index];
var elementType = element.__proto__.type;//
var transform = element.transform;//
elementParam.push(elementType);
switch(elementType){
case "polyline"://
var elementPoints = element.shape.points;
var elementSmooth = element.shape.smooth;
var elementStroke = element.style.stroke;
var elementLineWidth = element.style.lineWidth;
var opts = {
rectHover:true,
shape: {
points:elementPoints,
smooth:elementSmooth
},
style:{
stroke:elementStroke,
lineWidth:elementLineWidth
},
position:[transform == null ? 0 : transform[4], transform == null ? 0 : transform[5]]
}
elementParam.push(opts);
break;
case "line":
var x1 = element.shape.x1;
var x2 = element.shape.x2;
var y1 = element.shape.y1;
var y2 = element.shape.y2;
var elementStroke = element.style.stroke;
var elementLineWidth = element.style.lineWidth;
var opts = {
rectHover:true,
shape: {
x1: x1,
y1: y1,
x2: x2,
y2: y2,
percent:1
},
style:{
stroke:elementStroke,
lineWidth:elementLineWidth
},
position:[transform == null ? 0 : transform[4], transform == null ? 0 : transform[5]]
}
elementParam.push(opts);
break;
case "circle":
var cx = element.shape.cx;
var cy = element.shape.cy;
var r = element.shape.r;
var elementStroke = element.style.stroke;
var elementLineWidth = element.style.lineWidth;
var opts = {
rectHover:true,
shape: {
cx: cx,
cy: cy,
r: r,
},
style:{
fill:"rgba(255,255,255,0",
stroke:elementStroke,
lineWidth:elementLineWidth
},
position:[transform == null ? 0 : transform[4], transform == null ? 0 : transform[5]]
}
elementParam.push(opts);
break;
case "rect":
var x = element.shape.x;
var y = element.shape.y;
var width = element.shape.width;
var height = element.shape.height;
var elementStroke = element.style.stroke;
var elementLineWidth = element.style.lineWidth;
var opts = {
rectHover:true,
shape: {
x: x,
y: y,
width:width,
height:height
},
style:{
fill:"rgba(255,255,255,0",
stroke:elementStroke,
lineWidth:elementLineWidth
},
position:[transform == null ? 0 : transform[4], transform == null ? 0 : transform[5]]
}
elementParam.push(opts);
break;
case "isogon":
var x = element.shape.x;
var y = element.shape.y;
var r = element.shape.r;
var n = element.shape.n;
var elementStroke = element.style.stroke;
var elementLineWidth = element.style.lineWidth;
var opts = {
rectHover:true,
shape: {
x:x,
y:y,
r:r,
n:n
},
style:{
fill:"rgba(255,255,255,0",
stroke:elementStroke,
lineWidth:elementLineWidth
},
position:[transform == null ? 0 : transform[4], transform == null ? 0 : transform[5]]
}
elementParam.push(opts);
break;
case "image":
var x = element.style.x;
var y = element.style.y;
var width = element.style.width;
var height = element.style.height;
var image = element.style.image;
var opts = {
style: {
image:image,
x:100,
y:100,
width:200,
height:200
},
position:[transform == null ? 0 : transform[4], transform == null ? 0 : transform[5]]
}
elementParam.push(opts);
break;
}
objParam.push(elementParam);
}
s = JSON.stringify(objParam)
console.log(s);
zr.clear();
objs=[];
}
// ，
clear.onclick = function(){
zr.clear();
objs = [];
objsHistory=[];
}
//
load.onclick = function(){
zr = zrender.init(canvas);
objParam = eval('('+s+')');
for (let index = 0; index < objParam.length; index++) {
var element = objParam[index];
var elementType = element[0];
var elementParam = element[1];
switch(elementType){
case "polyline":
obj = new zrender.Polyline(elementParam);
zr.add(obj);
break;
case "line":
obj = new zrender.Line(elementParam);
zr.add(obj);
break;
case "circle":
obj = new zrender.Circle(elementParam);
zr.add(obj);
break;
case "rect":
obj = new zrender.Rect(elementParam);
zr.add(obj);
break;
case "isogon":
obj = new zrender.Isogon(elementParam);
zr.add(obj);
break;
case "image":
obj = new zrender.Image(elementParam);
obj.on("mousewheel", function(params){
var shape = params.target;
var event = params.event;
var delta = event.wheelDelta;
if(delta>0){
img.attr("height",shape.style.height += 10);
img.attr("width",shape.style.width += 10);
} else{
img.attr("height",shape.style.height -= 10);
img.attr("width",shape.style.width -= 10);
}
zr.refresh();
});
zr.add(obj);
break;
}
// ，
obj.on("dblclick",function(){
var lineWidth = document.getElementById("input2").value;
var color = document.getElementById("input3").value;
this.attr({
style:{
stroke:color,
lineWidth:lineWidth
}
});
});
}
objParam=[]
}
//
undo.onclick = function(){
zr.clear();
objsHistory.pop();
objs = objsHistory[objsHistory.length-1];
if(objs != undefined){
zr = zrender.init(canvas);
for (let index = 0; index < objs.length; index++) {
zr.add(objs[index]);
}
}else{
objs=[];
}
}
//
btn1.onclick = function(){
type="image";
let reader = new FileReader();
reader.readAsDataURL(document.querySelector("#file").files[0]);
reader.onload = function (e) {
let result = e.target.result; // base64
var img = new zrender.Image({
style: {
image:result,
x:100,
y:100,
width:200,
height:200
}
});
//
img.on("mousewheel", function(params){
var shape = params.target;
var event = params.event;
var delta = event.wheelDelta;
if(delta>0){
img.attr("height",shape.style.height += 10);
img.attr("width",shape.style.width += 10);
} else{
img.attr("height",shape.style.height -= 10);
img.attr("width",shape.style.width -= 10);
}
zr.refresh();
});
zr.add(img);
// ，
objs = zr.storage._displayList;
objsHistory.push(new Array().concat(objs));
};
}
//
canvas.onmousedown = function(e){
var x0, y0;
x0 = e.offsetX;
y0 = e.offsetY;
var lineWidth = document.getElementById("input2").value;
var color = document.getElementById("input3").value;
//
if(type == "circle"){
var r=10;
obj = new zrender.Circle({
shape: {
cx: x0,
cy: y0,
r: r
},
style:{
fill:"rgba(255,255,255,0",
stroke:color,
lineWidth:lineWidth
}
});
zr.add(obj);
}
//
if(type == "rect"){
obj = new zrender.Rect({
shape: {
x: x0,
y: y0,
width: 10,
height:10
},
style:{
fill:"rgba(255,255,255,0",
stroke:color,
lineWidth:lineWidth
}
});
zr.add(obj);
}
//
if(type == "isogon"){
var n = document.getElementById("input1").value;
obj = new zrender.Isogon({
shape: {
x: x0,
y: y0,
r: 10,
n: n
},
style:{
fill:"rgba(255,255,255,0",
stroke:color,
lineWidth:lineWidth
}
});
zr.add(obj);
}
//
if(type == "line"){
obj = new zrender.Line({
rectHover:true,
shape: {
x1: x0,
y1: y0,
x2: x0,
y2: y0,
percent:1
},
style:{
stroke:color,
lineWidth:lineWidth
}
});
zr.add(obj);
}
//
if(type == "pen"){
penline.push([x0,y0]);
obj = new zrender.Polyline({
rectHover:true,
shape: {
points:penline,
smooth:0.5
},
style:{
stroke:color,
lineWidth:lineWidth
}
});
zr.add(obj);
}
// ，
canvas.onmousemove = function(e){
x1 = e.offsetX;
y1 = e.offsetY;
//
if(type == "circle"){
zr.remove(obj);
var r=Math.sqrt(Math.pow(x0-x1,2)+Math.pow(y0-y1,2));
obj = new zrender.Circle({
shape: {
cx: x0,
cy: y0,
r: r
},
style:{
fill:"rgba(255,255,255,0)",
stroke:color,
lineWidth:lineWidth
}
});
zr.add(obj);
}
//
if(type == "rect"){
zr.remove(obj);
obj = new zrender.Rect({
shape: {
x: x0,
y: y0,
width: x1-x0,
height:y1-y0
},
style:{
fill:"rgba(255,255,255,0",
stroke:color,
lineWidth:lineWidth
}
});
zr.add(obj);
}
//
if(type == "isogon"){
zr.remove(obj);
var n = document.getElementById("input1").value;
var r=Math.sqrt(Math.pow(x0-x1,2)+Math.pow(y0-y1,2));
obj = new zrender.Isogon({
shape: {
x: x0,
y: y0,
r: r,
n: n
},
style:{
fill:"rgba(255,255,255,0",
stroke:color,
lineWidth:lineWidth
}
});
zr.add(obj);
}
//
if(type == "line"){
zr.remove(obj);
obj = new zrender.Line({
rectHover:true,
shape: {
x1: x0,
y1: y0,
x2: x1,
y2: y1,
percent:1
},
style:{
stroke:color,
lineWidth:lineWidth
}
});
zr.add(obj);
}
//
if(type == "pen"){
zr.remove(obj);
penline.push([x1,y1]);
obj = new zrender.Polyline({
rectHover:true,
shape: {
points:penline,
smooth:0.5
},
style:{
stroke:color,
lineWidth:lineWidth
}
});
zr.add(obj);
}
}
// ，
canvas.onmouseup = function(e){
canvas.onmousemove = null;
//
if(obj != undefined){
//
obj.on("dblclick",function(){
var lineWidth = document.getElementById("input2").value;
var color = document.getElementById("input3").value;
this.attr({
style:{
stroke:color,
lineWidth:lineWidth
}
});
});
objs = zr.storage._displayList;
// ，
objsHistory.push(new Array().concat(objs));
}
//
penline=[];
obj = null;
}
}
}