用vue写的
显示,隐藏
hide(){
this.canvas.getActiveObject().set('opacity', 0).setCoords();
this.canvas.requestRenderAll()
},
display(){
this.canvas.getActiveObject().set('opacity', 1).setCoords();
this.canvas.requestRenderAll()
},
翻转 水平 垂直用scaleY
flip(){
this.canvas.getActiveObject().set('scaleX', -1).setCoords();
this.canvas.requestRenderAll();
},
克隆(复制粘贴)
paste(_clipboard){
// clone again, so you can do multiple copies.
let canvas = this.canvas;
_clipboard.clone(function(clonedObj) {
canvas.discardActiveObject();
clonedObj.set({
left: clonedObj.left + 20,
top: clonedObj.top + 20,
evented: true,
});
if (clonedObj.type === 'activeSelection') {
// active selection needs a reference to the canvas.
clonedObj.canvas = canvas;
clonedObj.forEachObject(function(obj) {
canvas.add(obj);
});
// this should solve the unselectability
clonedObj.setCoords();
} else {
canvas.add(clonedObj);
}
_clipboard.top += 20;
_clipboard.left += 20;
canvas.setActiveObject(clonedObj);
// canvas.requestRenderAll();
});
},
copy(){
let canvas = this.canvas;
var _self = this;
canvas.getActiveObject().clone(function(cloned){
// let _clipboard = cloned;
_self.paste(cloned);
})
},
历史记录,回退撤销
data 初始化
config : {
canvasState : [],
currentStateIndex : -1,
redoStatus : false, //撤销状态
undoStatus : false, // 重做状态
undoFinishedStatus : 1,
redoFinishedStatus : 1,
undoButton : this.$refs.undo, //得不到 在 mounted 得到
redoButton : this.$refs.redo,
}
记录事件
canvasDataChange(){
let _self = this;
this.canvas.on('object:modified', function(){
_self.updateCanvasState();
});
this.canvas.on('object:added', function(){
_self.updateCanvasState()
});
this.canvas.on('object:removed', function(){
_self.updateCanvasState()
});
this.canvas.on('object:rotating', function(){
_self.updateCanvasState()
});
},
undo() {
let _self =this;
if(this.config.undoFinishedStatus){
if(this.config.currentStateIndex == -1){
this.config.undoStatus = false;
}
else{
if (this.config.canvasState.length >= 1) {
this.config.undoFinishedStatus = 0;
if(this.config.currentStateIndex != 0){
this.config.undoStatus = true;
this.canvas.loadFromJSON(this.config.canvasState[this.config.currentStateIndex-1],function(){
var jsonData = JSON.parse(_self.config.canvasState[_self.config.currentStateIndex-1]);
_self.canvas.renderAll();
_self.config.undoStatus = false;
_self.config.currentStateIndex -= 1;
// _self.config.undoButton.removeAttribute("disabled");
// _self.config.undoButton.disabled = false;
if(_self.config.currentStateIndex !== _self.config.canvasState.length-1){
// _self.config.redoButton.removeAttribute('disabled');
// _self.config.redoButton.disabled = false;
}
_self.config.undoFinishedStatus = 1;
});
}
else if(_self.config.currentStateIndex == 0){
_self.canvas.clear();
_self.config.undoFinishedStatus = 1;
// _self.config.undoButton.disabled= "disabled";
// _self.config.redoButton.removeAttribute('disabled');
// _self.config.redoButton.disabled = false;
_self.config.currentStateIndex -= 1;
}
}
}
}
},
redo() {
let _self = this;
if(this.config.redoFinishedStatus){
if((this.config.currentStateIndex == this.config.canvasState.length-1) && this.config.currentStateIndex != -1){
// this.config.redoButton.disabled= true;
}else{
if(this.config.canvasState.length > this.config.currentStateIndex && this.config.canvasState.length != 0){
this.config.redoFinishedStatus = 0;
this.config.redoStatus = true;
this.canvas.loadFromJSON(this.config.canvasState[this.config.currentStateIndex+1],function(){
var jsonData = JSON.parse(_self.config.canvasState[_self.config.currentStateIndex+1]);
_self.canvas.renderAll();
_self.config.redoStatus = false;
_self.config.currentStateIndex += 1;
if(_self.config.currentStateIndex != -1){
// _self.config.redoButton.disabled = false;
}
_self.config.redoFinishedStatus = 1;
if((_self.config.currentStateIndex == _self.config.canvasState.length-1) && _self.config.currentStateIndex != -1){
// _self.config.redoButton.disabled= true;
}
});
}
}
}
},
删除
del() {
var el = this.canvas.getActiveObject();
this.canvas.remove(el);
},
格式化 数据
toJson(){
console.log(JSON.stringify(this.canvas.toJSON()));
},
toSVG(){
// return this.canvas.toSVG()
console.log(this.canvas.toSVG());
},
canvas导出为图片并下载
canvasToImage(){
var MIME_TYPE = "image/png";
//转换成base64
var imgURL = this.canvas.toDataURL(MIME_TYPE);
//创建一个a链接,模拟点击下载
var dlLink = document.createElement('a');
var filename = '个人画板_' + (new Date()).getTime() + '.png';
dlLink.download = filename;
dlLink.href = imgURL;
dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
document.body.appendChild(dlLink);
dlLink.click();
document.body.removeChild(dlLink);
},
或者
downloadimage(event){
// 图片导出为 png 格式
var type = 'png';
// 返回一个包含JPG图片的<img>元素
var img_png_src = this.canvas.toDataURL("image/png"); //将画板保存为图片格式的函数
var imgData = img_png_src.replace(this._fixType(type),'image/octet-stream');
var filename = '个人画板_' + (new Date()).getTime() + '.' + type;
this.saveFile(imgData,filename);
},
saveFile(data, filename){
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
},
_fixType(type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
},
组合 打散
group() {
this.fabricAction.fabricObjGroup(this);
},
ungroup() {
this.fabricAction.fabricObjUnGroup(this);
},
锁定
lock() {
this.fabricAction.lockOption(this);
},
所有评论(0)