Merge remote-tracking branch 'origin/StableVersion' into develop
This commit is contained in:
X1627315083
@@ -295,6 +295,102 @@ function JSSetRemoveImage(fun){
|
||||
cornerSize: 24
|
||||
})
|
||||
}
|
||||
function JSSetGroup(data){
|
||||
let rect
|
||||
if(data.gradient){
|
||||
let colorStops = []
|
||||
data.gradient.gradientList.forEach(item=>{
|
||||
let obj = {
|
||||
offset:item.left.split('%')[0]/100,
|
||||
color:`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`
|
||||
}
|
||||
colorStops.push(obj)
|
||||
})
|
||||
let { x0, y0, x1, y1 } = calculateGradientCoordinate(100,120,data.gradient.angle)
|
||||
let linear = new fabric.Gradient({
|
||||
type: 'linear', // 线性渐变
|
||||
// coords: { x1: 0, y1: 0, x2: 200, y2: 0 }, // 渐变方向
|
||||
coords: { x1:x0, y1:y0, x2:x1, y2:y1 }, // 渐变方向
|
||||
colorStops: colorStops,
|
||||
})
|
||||
var color = new fabric.Rect({
|
||||
top:0,
|
||||
left:0,
|
||||
width: 110,
|
||||
height: 130,
|
||||
textAlign: "left",
|
||||
fill: linear // 设置渐变填充
|
||||
// fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
|
||||
});
|
||||
var text = new fabric.Text('',{
|
||||
left: 0,
|
||||
top: 0,
|
||||
fontSize: 0,
|
||||
fontFamily: "Arial",
|
||||
textAlign: "left",
|
||||
fill: "black",
|
||||
});
|
||||
let text1 = new fabric.Text('',{
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: 20,
|
||||
fontSize: 0,
|
||||
fontFamily: "Arial",
|
||||
textAlign: "left",
|
||||
});
|
||||
rect = {text,text1,color,width:110}
|
||||
}else{
|
||||
var text = new fabric.Text(data.tcx,{
|
||||
left: 0,
|
||||
top: 60,
|
||||
fontSize: 14,
|
||||
fontFamily: "Arial",
|
||||
textAlign: "left",
|
||||
fill: "black",
|
||||
});
|
||||
let text1 = new fabric.Text(data.name,{
|
||||
left: 0,
|
||||
top: 80,
|
||||
width: 20,
|
||||
fontSize: 14,
|
||||
fontFamily: "Arial",
|
||||
textAlign: "left",
|
||||
});
|
||||
let width = 110 > text1.width ? 110 : text1.width;
|
||||
var color = new fabric.Rect({
|
||||
width: width,
|
||||
height: 60,
|
||||
textAlign: "left",
|
||||
fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
|
||||
});
|
||||
rect = {text,text1,color,width}
|
||||
}
|
||||
return rect
|
||||
}
|
||||
function JSSetPencil(str,canvas){
|
||||
let pencil
|
||||
if(str == 'PencilBrush'){
|
||||
pencil = new fabric.PencilBrush(canvas,{}); //普通笔
|
||||
}else if(str == 'Marking'){
|
||||
pencil = new fabric.PencilBrush(canvas,); //记号笔
|
||||
}else if(str == 'InkBrush'){
|
||||
pencil = new fabric.InkBrush(canvas,{}); //油画笔
|
||||
}else if(str=='CrayonBrush'){
|
||||
pencil = new fabric.CrayonBrush(canvas,{}); //蜡笔
|
||||
}else if(str == 'RibbonBrush'){
|
||||
pencil = new fabric.RibbonBrush(canvas,{width: 1,}); //色带
|
||||
}else if(str == 'MarkerBrush'){
|
||||
pencil = new fabric.MarkerBrush(canvas,{}); //书写笔
|
||||
// pencil = new fabric.PenBrush(canvas,{}); //书写笔
|
||||
}else if(str == 'WritingBrush'){
|
||||
pencil = new fabric.WritingBrush(canvas,{}); //毛笔
|
||||
}else if(str == 'LongfurBrush'){
|
||||
pencil = new fabric.LongfurBrush(canvas,{width: 1,}); //色带
|
||||
}else if(str == 'SpraypaintBrush'){
|
||||
pencil = new fabric.SpraypaintBrush(canvas,{}); //长毛刷
|
||||
}
|
||||
return pencil
|
||||
}
|
||||
export {
|
||||
multiselectJS,
|
||||
JSRectUpdata,
|
||||
@@ -304,5 +400,7 @@ export {
|
||||
JScreateCheck,
|
||||
exportSele,
|
||||
JSSetTexture,
|
||||
JSSetRemoveImage
|
||||
JSSetRemoveImage,
|
||||
JSSetGroup,
|
||||
JSSetPencil,
|
||||
}
|
||||
239
src/tool/canvasGeneral.js
Normal file
239
src/tool/canvasGeneral.js
Normal file
@@ -0,0 +1,239 @@
|
||||
import {
|
||||
exportSele,
|
||||
JSRectUpdata,
|
||||
JSchangeType,
|
||||
JScanvasMouseDown,
|
||||
JScanvasMouseMove,
|
||||
JScreateCheck,
|
||||
JSSetTexture,
|
||||
JSSetRemoveImage,
|
||||
} from "@/tool/canvasDrawing";
|
||||
class myCanvas {
|
||||
constructor() {
|
||||
this.canvasDomParent = null;
|
||||
this.canvas = null;
|
||||
this.canvasDom = null;
|
||||
this.pencilBtn = null;
|
||||
this.pencilType = null;
|
||||
this.keyDown = [];//键盘按下
|
||||
this._clipboard = null; //剪切板
|
||||
this.isLoadCanvas = false//撤回或者反撤回false为撤回
|
||||
this.reverseCanvasState=[];//撤回
|
||||
this.normalCanvasState=[];//反撤回
|
||||
this.canvasState = {}//当前内容
|
||||
this.pencilList = {
|
||||
textFontFamilyList:[
|
||||
{ value: 'Arial', name: 'select font' },
|
||||
{ value: 'EN_slogan_art1', name: 'select font' },
|
||||
{ value: 'EN_slogan_art2', name: 'select font' },
|
||||
{ value: 'EN_slogan_art3', name: 'select font' },
|
||||
{ value: 'EN_slogan_art4', name: 'select font' },
|
||||
{ value: 'EN_slogan_art5', name: 'select font' },
|
||||
{ value: 'EN_slogan_art6', name: 'select font' },
|
||||
{ value: 'EN_slogan_art7', name: 'select font' },
|
||||
{ value: '微软雅黑', name: '请选择字体' },
|
||||
{ value: 'CN_slogan_art1', name: '请选择字体' },
|
||||
{ value: 'CN_slogan_art2', name: '请选择字体' },
|
||||
{ value: 'CN_slogan_art3', name: '请选择字体' },
|
||||
{ value: 'CN_slogan_art4', name: '请选择字体' },
|
||||
{ value: '华文行楷', name: '请选择字体' },
|
||||
{ value: '隶书', name: '请选择字体' },
|
||||
],
|
||||
brushList:[
|
||||
{
|
||||
value:'PencilBrush',
|
||||
url:'/image/brush/PencilBrush.jpg'
|
||||
},{
|
||||
value:'Marking',
|
||||
url:'/image/brush/PencilBrush-2.jpg'
|
||||
},{
|
||||
value:'InkBrush',
|
||||
url:'/image/brush/InkBrush.jpg'
|
||||
},{
|
||||
value:'CrayonBrush',
|
||||
url:'/image/brush/CrayonBrush.jpg'
|
||||
},{
|
||||
value:'RibbonBrush',
|
||||
url:'/image/brush/RibbonBrush.jpg'
|
||||
},{
|
||||
value:'MarkerBrush',
|
||||
url:'/image/brush/MarkerBrush.jpg'
|
||||
},{
|
||||
value:'WritingBrush',
|
||||
url:'/image/brush/WritingBrush.jpg'
|
||||
},{
|
||||
value:'LongfurBrush',
|
||||
url:'/image/brush/LongfurBrush.jpg'
|
||||
},{
|
||||
value:'SpraypaintBrush',
|
||||
url:'/image/brush/SpraypaintBrush.jpg'
|
||||
},
|
||||
]
|
||||
|
||||
}
|
||||
}
|
||||
canvasInit(dom, val) {
|
||||
this.canvasDomParent = dom;
|
||||
this.canvasClear()
|
||||
var canvasDom = document.createElement("canvas");
|
||||
this.canvasDomParent.appendChild(canvasDom);
|
||||
this.canvas = new fabric.Canvas(canvasDom, {
|
||||
backgroundColor: "rgba(255, 255, 255)",
|
||||
width: val.width?val.width:this.canvasDomParent.getBoundingClientRect().width,
|
||||
height: val.height?val.height:this.canvasDomParent.getBoundingClientRect().height,
|
||||
isDrawingMode: val.isDrawingMode, // 开启绘图模式
|
||||
});
|
||||
|
||||
if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
|
||||
JSSetRemoveImage(this.deleteObject)
|
||||
}else{
|
||||
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = this.deleteObject
|
||||
}
|
||||
|
||||
this.canvas.on("object:modified", ()=>{
|
||||
this.updateCanvasState('')
|
||||
});
|
||||
|
||||
this.canvasKeyDown = this.canvasKeyDown.bind(this);
|
||||
this.canvasKeyUp = this.canvasKeyUp.bind(this);
|
||||
document.addEventListener("keydown", this.canvasKeyDown);
|
||||
document.addEventListener("keyup", this.canvasKeyUp);
|
||||
initAligningGuidelines(this.canvas,true)
|
||||
JSchangeType(this.canvas,'init')
|
||||
this.updateCanvasState('')
|
||||
this.canvas.on("object:added", (event)=>{
|
||||
if(!this.isLoadCanvas)this.updateCanvasState('')
|
||||
});
|
||||
|
||||
return this.canvas
|
||||
}
|
||||
|
||||
canvasKeyUp(event){
|
||||
this.keyDown = this.keyDown.filter(function(item) {
|
||||
return event.code !== item;
|
||||
})
|
||||
}
|
||||
canvasKeyDown(event){
|
||||
if(this.keyDown.indexOf(event.key)>-1){
|
||||
}else{
|
||||
this.keyDown.push(event.code)
|
||||
if(event.key === 'Enter' && operation.value == 'fold'){
|
||||
foldEnd('Enter')
|
||||
}else if(event.key === 'Delete'){
|
||||
deleteObject()
|
||||
}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyZ') > -1 && this.keyDown.indexOf('ShiftLeft') > -1){
|
||||
this.historyState('reverse')
|
||||
}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyZ') > -1){
|
||||
this.historyState('')
|
||||
}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyC') > -1){
|
||||
this.copy()
|
||||
}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyV') > -1){
|
||||
this.paste()
|
||||
}
|
||||
}
|
||||
}
|
||||
canvasClear(){
|
||||
let oldCanvasDom = this.canvasDomParent.querySelector('.canvas-container')
|
||||
let oldCanvasDom1 = this.canvasDomParent.querySelector('canvas')
|
||||
|
||||
if(oldCanvasDom)oldCanvasDom.remove()
|
||||
if(oldCanvasDom1)oldCanvasDom1.remove()
|
||||
|
||||
document.removeEventListener("keydown", this.canvasKeyDown);
|
||||
document.removeEventListener("keyup", this.canvasKeyUp);
|
||||
|
||||
}
|
||||
//删除选中元素
|
||||
deleteObject = ()=> {
|
||||
if(!this.canvas.getActiveObjects()){
|
||||
return
|
||||
}
|
||||
let target = this.canvas.getActiveObjects()
|
||||
target.forEach((item)=>{
|
||||
this.canvas.fxRemove(item, {
|
||||
onComplete:()=>{
|
||||
this.canvas.discardActiveObject(); // 丢弃当前选中的对象
|
||||
this.canvas.renderAll(); // 重新渲染 Canvas
|
||||
}
|
||||
})
|
||||
this.canvas.FX_DURATION = 300
|
||||
})
|
||||
this.updateCanvasState('remove')
|
||||
}
|
||||
//复制粘贴
|
||||
copy(canvas){
|
||||
var activeObject = this.canvas.getActiveObject();
|
||||
if(!activeObject){
|
||||
return
|
||||
}
|
||||
activeObject.clone((cloned)=>{
|
||||
this._clipboard = cloned;
|
||||
})
|
||||
}
|
||||
paste = () => {//粘贴
|
||||
if(!this._clipboard){
|
||||
return
|
||||
}
|
||||
this._clipboard.clone(clonedObj => {
|
||||
this.canvas.discardActiveObject() // 取消选择
|
||||
|
||||
// 设置新内容的坐标位置
|
||||
clonedObj.set({
|
||||
left: clonedObj.left + 10,
|
||||
top: clonedObj.top + 10,
|
||||
evented: true
|
||||
})
|
||||
|
||||
if (clonedObj.type === 'activeSelection') {
|
||||
// 活动选择需要一个对画布的引用
|
||||
clonedObj.canvas = canvas;
|
||||
clonedObj.forEachObject((obj)=>{
|
||||
this.canvas.add(obj)
|
||||
})
|
||||
|
||||
clonedObj.setCoords()
|
||||
} else {
|
||||
this.canvas.add(clonedObj)
|
||||
}
|
||||
this._clipboard.top += 10
|
||||
this._clipboard.left += 10
|
||||
this.canvas.setActiveObject(clonedObj)
|
||||
this.canvas.requestRenderAll()
|
||||
})
|
||||
this.updateCanvasState()
|
||||
}
|
||||
|
||||
//撤回反撤回
|
||||
//设置画布监听修改添加事件，用来做撤回功能
|
||||
updateCanvasState(str){
|
||||
const canvasAsJson = JSON.stringify(this.canvas.toJSON());
|
||||
if(str == 'loadingCompleted'){
|
||||
// this.reverseCanvasState.push(canvasAsJson);
|
||||
}
|
||||
this.normalCanvasState.push(canvasAsJson);
|
||||
if (this.isLoadCanvas) {
|
||||
this.reverseCanvasState = []
|
||||
this.isLoadCanvas = false;
|
||||
this.canvasState = canvasAsJson
|
||||
}
|
||||
}
|
||||
//撤回
|
||||
historyState(str){
|
||||
if(str == 'reverse' && this.reverseCanvasState.length > 0){//反撤回
|
||||
let obj = this.reverseCanvasState.pop()
|
||||
// this.canvasState = this.reverseCanvasState[this.reverseCanvasState.length-1]
|
||||
this.canvasState = obj
|
||||
this.normalCanvasState.push(obj);
|
||||
}else if(str == '' && this.normalCanvasState.length > 1){
|
||||
let obj = this.normalCanvasState.pop()
|
||||
this.canvasState = this.normalCanvasState[this.normalCanvasState.length-1]
|
||||
this.reverseCanvasState.push(obj);
|
||||
this.isLoadCanvas = true;
|
||||
}else{
|
||||
return
|
||||
}
|
||||
this.canvas.loadFromJSON(this.canvasState, () => {});
|
||||
}
|
||||
}
|
||||
|
||||
export default new myCanvas()
|
||||
@@ -183,6 +183,7 @@ export const Https = {
|
||||
updateUserGroupName:`/api/history/updateUserGroupName`, //History修改用户分组名
|
||||
historyChoose:`/api/history/choose`, //History choose
|
||||
getDesignDetail:`/api/design/detail/getDetail`,//查询design详情
|
||||
designSingleWithGradient:`/api/design/detail/designSingleWithGradient`,//查询需要更新mask列表
|
||||
getNextSysElement:'/api/design/detail/getNextSysElement',//切换系统的element
|
||||
detailPrintDot:'/api/design/detail/printDot',//print打点预览
|
||||
designSingle:`/api/design/detail/designSingle`,//单个design
|
||||
@@ -225,6 +226,9 @@ export const Https = {
|
||||
generateResult:'/api/generate/result',//获取生成结果
|
||||
generateLike:'/api/generate/like',//喜欢ganerate图片
|
||||
generateDislike:'/api/generate/dislike',//喜欢ganerate图片
|
||||
imageToSketch:'/api/generate/imageToSketch',//成品图转为线稿
|
||||
modifySketch:'/api/generate/modifySketch',//修改画布内容并且储存
|
||||
|
||||
elementUpload:`/api/element/upload`,//上传图片
|
||||
// oldHis:`/oldHis/history/queryUserGroup`,//上传图片
|
||||
sketchBoardsBoundingBox:`/api/design/sketchBoardsBoundingBox`,//裁剪sketch图片
|
||||
|
||||
Reference in New Issue
Block a user