feat: 引入eslint
This commit is contained in:
chenjinsong
@@ -1,23 +1,23 @@
|
||||
import {register as registerFlow} from '@topology/flow-diagram'
|
||||
import {register as registerActivity} from '@topology/activity-diagram'
|
||||
import {register as registerSequence} from '@topology/sequence-diagram'
|
||||
import {register as registerChart} from '@topology/chart-diagram';
|
||||
import { Node, Rect,Point, Direction } from '@topology/core';
|
||||
import { register as registerFlow } from '@topology/flow-diagram'
|
||||
import { register as registerActivity } from '@topology/activity-diagram'
|
||||
import { register as registerSequence } from '@topology/sequence-diagram'
|
||||
import { register as registerChart } from '@topology/chart-diagram'
|
||||
import { Node, Rect, Point, Direction } from '@topology/core'
|
||||
// import { register as registerClass } from './class-diagram/index'
|
||||
export let canvas;
|
||||
export let canvas
|
||||
|
||||
export function canvasRegister(){
|
||||
registerFlow();
|
||||
registerActivity();
|
||||
registerSequence();
|
||||
registerChart();
|
||||
export function canvasRegister () {
|
||||
registerFlow()
|
||||
registerActivity()
|
||||
registerSequence()
|
||||
registerChart()
|
||||
// registerClass()
|
||||
}
|
||||
|
||||
export const Tools=[
|
||||
export const Tools = [
|
||||
{
|
||||
group:'General',
|
||||
children:[
|
||||
group: 'General',
|
||||
children: [
|
||||
// {
|
||||
// name:'rectangleImg',
|
||||
// icon:'icon-rect',
|
||||
@@ -55,525 +55,519 @@ export const Tools=[
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'rectangle',
|
||||
icon:'icon-rect',
|
||||
data:{
|
||||
text:'rect',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
name: 'rectangle',
|
||||
icon: 'icon-rect',
|
||||
data: {
|
||||
text: 'rect',
|
||||
rect: {
|
||||
width: 100,
|
||||
height: 100
|
||||
},
|
||||
paddingLeft:10,
|
||||
paddingRight:10,
|
||||
paddingTop:10,
|
||||
paddingBottom:10,
|
||||
name:'rectangle',
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
name: 'rectangle'
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'rectangle',
|
||||
icon:'icon-rectangle',
|
||||
data:{
|
||||
text:'rectangle',
|
||||
rect:{
|
||||
width:200,
|
||||
height:50
|
||||
name: 'rectangle',
|
||||
icon: 'icon-rectangle',
|
||||
data: {
|
||||
text: 'rectangle',
|
||||
rect: {
|
||||
width: 200,
|
||||
height: 50
|
||||
},
|
||||
paddingLeft:10,
|
||||
paddingRight:10,
|
||||
paddingTop:10,
|
||||
paddingBottom:10,
|
||||
borderRadius:0.1,
|
||||
name:'rectangle',
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
borderRadius: 0.1,
|
||||
name: 'rectangle'
|
||||
// icon: '\ue680',
|
||||
// iconFamily: 'nz-icon',
|
||||
// iconColor: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'circle',
|
||||
icon:'icon-circle',
|
||||
data:{
|
||||
text:'circle',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
name: 'circle',
|
||||
icon: 'icon-circle',
|
||||
data: {
|
||||
text: 'circle',
|
||||
rect: {
|
||||
width: 100,
|
||||
height: 100
|
||||
},
|
||||
name:'circle',
|
||||
textMaxLine:1
|
||||
name: 'circle',
|
||||
textMaxLine: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'triangle',
|
||||
icon:'icon-triangle',
|
||||
data:{
|
||||
text:'triangle',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
name: 'triangle',
|
||||
icon: 'icon-triangle',
|
||||
data: {
|
||||
text: 'triangle',
|
||||
rect: {
|
||||
width: 100,
|
||||
height: 100
|
||||
},
|
||||
name:'triangle'
|
||||
name: 'triangle'
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'diamond',
|
||||
icon:'icon-diamond',
|
||||
data:{
|
||||
text:'diamond',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
name: 'diamond',
|
||||
icon: 'icon-diamond',
|
||||
data: {
|
||||
text: 'diamond',
|
||||
rect: {
|
||||
width: 100,
|
||||
height: 100
|
||||
},
|
||||
name:'diamond'
|
||||
name: 'diamond'
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'pentagon',
|
||||
icon:'icon-pentagon',
|
||||
data:{
|
||||
text:'pentagon',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
name: 'pentagon',
|
||||
icon: 'icon-pentagon',
|
||||
data: {
|
||||
text: 'pentagon',
|
||||
rect: {
|
||||
width: 100,
|
||||
height: 100
|
||||
},
|
||||
name:'pentagon'
|
||||
name: 'pentagon'
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'hexagon',
|
||||
icon:'icon-hexagon',
|
||||
data:{
|
||||
text:'hexagon',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
name: 'hexagon',
|
||||
icon: 'icon-hexagon',
|
||||
data: {
|
||||
text: 'hexagon',
|
||||
rect: {
|
||||
width: 100,
|
||||
height: 100
|
||||
},
|
||||
paddingTop:10,
|
||||
paddingBottom:10,
|
||||
name:'hexagon'
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
name: 'hexagon'
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'pentagram',
|
||||
icon:'icon-pentagram',
|
||||
data:{
|
||||
text:'pentagram',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
name: 'pentagram',
|
||||
icon: 'icon-pentagram',
|
||||
data: {
|
||||
text: 'pentagram',
|
||||
rect: {
|
||||
width: 100,
|
||||
height: 100
|
||||
},
|
||||
name:'pentagram'
|
||||
name: 'pentagram'
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
];
|
||||
}
|
||||
]
|
||||
|
||||
export const imageTemp={
|
||||
export const imageTemp = {
|
||||
name: 'rectangleImg',
|
||||
icon: 'icon-image',
|
||||
data: {
|
||||
"type":0,
|
||||
"rect":{
|
||||
"x":922,
|
||||
"y":406,
|
||||
"width":100,
|
||||
"height":100,
|
||||
type: 0,
|
||||
rect: {
|
||||
x: 922,
|
||||
y: 406,
|
||||
width: 100,
|
||||
height: 100
|
||||
},
|
||||
imageRatio:false,
|
||||
"lineWidth":0,
|
||||
"rotate":0,
|
||||
"offsetRotate":0,
|
||||
"globalAlpha":1,
|
||||
"dash":0,
|
||||
"strokeStyle":"#000000",
|
||||
"animatePos":0,
|
||||
"name":"rectangleImg",
|
||||
"lineDashOffset":0,
|
||||
"text":"",
|
||||
"textOffsetX":0,
|
||||
"textOffsetY":0,
|
||||
"visible":true,
|
||||
"zRotate":0,
|
||||
"animateDuration":0,
|
||||
"animateFrames":[],
|
||||
"animateFrame":0,
|
||||
"borderRadius":0,
|
||||
"icon":"",
|
||||
"image":"",
|
||||
"imageAlign":"center",
|
||||
"bkType":0,
|
||||
"gradientAngle":0,
|
||||
"gradientRadius":0.01,
|
||||
"paddingTop":5,
|
||||
"paddingBottom":5,
|
||||
"paddingLeft":5,
|
||||
"paddingRight":5,
|
||||
"paddingLeftNum":5,
|
||||
"paddingRightNum":5,
|
||||
"paddingTopNum":5,
|
||||
"paddingBottomNum":5,
|
||||
"fullIconRect":{"width":80,"height":90,"center":{"x":972,"y":456},"ex":1012,"ey":496}
|
||||
imageRatio: false,
|
||||
lineWidth: 0,
|
||||
rotate: 0,
|
||||
offsetRotate: 0,
|
||||
globalAlpha: 1,
|
||||
dash: 0,
|
||||
strokeStyle: '#000000',
|
||||
animatePos: 0,
|
||||
name: 'rectangleImg',
|
||||
lineDashOffset: 0,
|
||||
text: '',
|
||||
textOffsetX: 0,
|
||||
textOffsetY: 0,
|
||||
visible: true,
|
||||
zRotate: 0,
|
||||
animateDuration: 0,
|
||||
animateFrames: [],
|
||||
animateFrame: 0,
|
||||
borderRadius: 0,
|
||||
icon: '',
|
||||
image: '',
|
||||
imageAlign: 'center',
|
||||
bkType: 0,
|
||||
gradientAngle: 0,
|
||||
gradientRadius: 0.01,
|
||||
paddingTop: 5,
|
||||
paddingBottom: 5,
|
||||
paddingLeft: 5,
|
||||
paddingRight: 5,
|
||||
paddingLeftNum: 5,
|
||||
paddingRightNum: 5,
|
||||
paddingTopNum: 5,
|
||||
paddingBottomNum: 5,
|
||||
fullIconRect: { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
|
||||
}
|
||||
};
|
||||
/*自定义图片组件*/
|
||||
export function myShape(ctx, node) { //自定义图片组件
|
||||
|
||||
ctx.beginPath();
|
||||
|
||||
ctx.rect(node.rect.x,node.rect.y,node.rect.width,node.rect.height);
|
||||
if(node.data.lineWidth<=0){
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0)';
|
||||
}
|
||||
/* 自定义图片组件 */
|
||||
export function myShape (ctx, node) { // 自定义图片组件
|
||||
ctx.beginPath()
|
||||
|
||||
ctx.rect(node.rect.x, node.rect.y, node.rect.width, node.rect.height)
|
||||
if (node.data.lineWidth <= 0) {
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0)'
|
||||
}
|
||||
// 必须判空再填充
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
export function myAnchors(node) {
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom));
|
||||
export function myAnchors (node) {
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom))
|
||||
}
|
||||
export function myIconRect(node) {
|
||||
node.iconRect = new Rect(node.rect.x+node.paddingLeft, node.rect.y+node.paddingTop, node.rect.width-(node.paddingLeft+node.paddingRight), node.rect.height-20-(node.paddingTop+node.paddingBottom));
|
||||
node.fullIconRect = node.rect;
|
||||
export function myIconRect (node) {
|
||||
node.iconRect = new Rect(node.rect.x + node.paddingLeft, node.rect.y + node.paddingTop, node.rect.width - (node.paddingLeft + node.paddingRight), node.rect.height - 20 - (node.paddingTop + node.paddingBottom))
|
||||
node.fullIconRect = node.rect
|
||||
}
|
||||
export function myTextRect(node) {
|
||||
export function myTextRect (node) {
|
||||
node.textRect = new Rect(
|
||||
node.rect.x +node.paddingLeft,
|
||||
node.rect.y+node.rect.height-20-node.paddingBottom,
|
||||
node.rect.width -(node.paddingLeft+node.paddingRight),
|
||||
20,
|
||||
);
|
||||
node.fullTextRect = node.rect;
|
||||
node.rect.x + node.paddingLeft,
|
||||
node.rect.y + node.rect.height - 20 - node.paddingBottom,
|
||||
node.rect.width - (node.paddingLeft + node.paddingRight),
|
||||
20
|
||||
)
|
||||
node.fullTextRect = node.rect
|
||||
}
|
||||
/*自定义图片组件*/
|
||||
/* 自定义图片组件 */
|
||||
|
||||
/*自定义立方体*/
|
||||
export function myCubec(ctx, node) {
|
||||
//立方体
|
||||
/* 自定义立方体 */
|
||||
export function myCubec (ctx, node) {
|
||||
// 立方体
|
||||
// ctx.rect(node.rect.x,node.rect.y,node.rect.width,node.rect.height);
|
||||
let x=node.rect.x+10,y=node.rect.y+10,w=node.rect.width-20,h=node.rect.height-20;
|
||||
|
||||
|
||||
const x = node.rect.x + 10; const y = node.rect.y + 10; const w = node.rect.width - 20; const h = node.rect.height - 20
|
||||
|
||||
// LINE MODE
|
||||
ctx.lineJoin = "round";
|
||||
|
||||
ctx.lineJoin = 'round'
|
||||
|
||||
// center face
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y+h/3);
|
||||
ctx.lineTo(x + w*2/3, y+h/3 );
|
||||
ctx.lineTo(x + w*2/3, y +h);
|
||||
ctx.lineTo(x, y + h);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = node.fillStyle;
|
||||
ctx.strokeStyle = node.strokeStyle;
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, y + h / 3)
|
||||
ctx.lineTo(x + w * 2 / 3, y + h / 3)
|
||||
ctx.lineTo(x + w * 2 / 3, y + h)
|
||||
ctx.lineTo(x, y + h)
|
||||
ctx.closePath()
|
||||
ctx.fillStyle = node.fillStyle
|
||||
ctx.strokeStyle = node.strokeStyle
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
|
||||
// top face
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y+h/3);
|
||||
ctx.lineTo(x + w/3, y);
|
||||
ctx.lineTo(x + w, y);
|
||||
ctx.lineTo(x + w*2/3, y+h/3 );
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = node.fillStyle;
|
||||
ctx.strokeStyle = node.strokeStyle;
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, y + h / 3)
|
||||
ctx.lineTo(x + w / 3, y)
|
||||
ctx.lineTo(x + w, y)
|
||||
ctx.lineTo(x + w * 2 / 3, y + h / 3)
|
||||
ctx.closePath()
|
||||
ctx.fillStyle = node.fillStyle
|
||||
ctx.strokeStyle = node.strokeStyle
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
|
||||
// right face
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + w*2/3, y+h/3 );
|
||||
ctx.lineTo(x + w, y);
|
||||
ctx.lineTo(x + w, y+h*2/3);
|
||||
ctx.lineTo(x + w*2/3, y + h);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = node.fillStyle;
|
||||
ctx.strokeStyle = node.strokeStyle;
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x + w * 2 / 3, y + h / 3)
|
||||
ctx.lineTo(x + w, y)
|
||||
ctx.lineTo(x + w, y + h * 2 / 3)
|
||||
ctx.lineTo(x + w * 2 / 3, y + h)
|
||||
ctx.closePath()
|
||||
ctx.fillStyle = node.fillStyle
|
||||
ctx.strokeStyle = node.strokeStyle
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
|
||||
// 必须判空再填充
|
||||
|
||||
}
|
||||
export function myCubeAnchors(node) {//立方体锚点
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom));
|
||||
export function myCubeAnchors (node) { // 立方体锚点
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom))
|
||||
}
|
||||
/*自定义立方体*/
|
||||
/* 自定义立方体 */
|
||||
|
||||
|
||||
|
||||
export function onChangeAnimate(node,animateType,fillStyle,strokeStyle) {
|
||||
node.animateType=animateType;
|
||||
export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
|
||||
node.animateType = animateType
|
||||
if (node.animateType === 'custom') {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
node.animateFrames = [];
|
||||
const state = Node.cloneState(node);
|
||||
|
||||
node.animateFrames = []
|
||||
const state = Node.cloneState(node)
|
||||
switch (animateType) {
|
||||
case 'upDown':
|
||||
state.rect.y -= 10;
|
||||
state.rect.ey -= 10;
|
||||
state.rect.y -= 10
|
||||
state.rect.ey -= 10
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
});
|
||||
})
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(node)
|
||||
});
|
||||
})
|
||||
node.animateFrames.push({
|
||||
duration: 200,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
break;
|
||||
})
|
||||
break
|
||||
case 'leftRight':
|
||||
state.rect.x -= 10;
|
||||
state.rect.ex -= 10;
|
||||
state.rect.x -= 10
|
||||
state.rect.ex -= 10
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.rect.x += 20;
|
||||
state.rect.ex += 20;
|
||||
})
|
||||
state.rect.x += 20
|
||||
state.rect.ex += 20
|
||||
node.animateFrames.push({
|
||||
duration: 80,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.rect.x -= 20;
|
||||
state.rect.ex -= 20;
|
||||
})
|
||||
state.rect.x -= 20
|
||||
state.rect.ex -= 20
|
||||
node.animateFrames.push({
|
||||
duration: 50,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.rect.x += 20;
|
||||
state.rect.ex += 20;
|
||||
})
|
||||
state.rect.x += 20
|
||||
state.rect.ex += 20
|
||||
node.animateFrames.push({
|
||||
duration: 30,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
})
|
||||
node.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(node)
|
||||
});
|
||||
break;
|
||||
})
|
||||
break
|
||||
case 'heart':
|
||||
state.rect.x -= 5;
|
||||
state.rect.ex += 5;
|
||||
state.rect.y -= 5;
|
||||
state.rect.ey += 5;
|
||||
state.rect.width += 5;
|
||||
state.rect.height += 10;
|
||||
state.rect.x -= 5
|
||||
state.rect.ex += 5
|
||||
state.rect.y -= 5
|
||||
state.rect.ey += 5
|
||||
state.rect.width += 5
|
||||
state.rect.height += 10
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
});
|
||||
})
|
||||
node.animateFrames.push({
|
||||
duration: 400,
|
||||
linear: true,
|
||||
state: Node.cloneState(node)
|
||||
});
|
||||
break;
|
||||
})
|
||||
break
|
||||
case 'success':
|
||||
state.strokeStyle = strokeStyle?strokeStyle:'#237804';
|
||||
state.strokeStyle = strokeStyle || '#237804'
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
});
|
||||
})
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(node)
|
||||
});
|
||||
state.strokeStyle = '#237804';
|
||||
})
|
||||
state.strokeStyle = '#237804'
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
});
|
||||
})
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(node)
|
||||
});
|
||||
state.strokeStyle = strokeStyle?strokeStyle: '#237804';
|
||||
state.fillStyle = fillStyle?fillStyle:'#389e0d22';
|
||||
})
|
||||
state.strokeStyle = strokeStyle || '#237804'
|
||||
state.fillStyle = fillStyle || '#389e0d22'
|
||||
node.animateFrames.push({
|
||||
duration: 3000,
|
||||
linear: true,
|
||||
state
|
||||
});
|
||||
break;
|
||||
})
|
||||
break
|
||||
case 'warning':
|
||||
state.strokeStyle = strokeStyle?strokeStyle:'#fa8c16';
|
||||
state.fillStyle = fillStyle?fillStyle:'#fa8c16';
|
||||
state.lineWidth=5;
|
||||
state.dash = 2;
|
||||
state.strokeStyle = strokeStyle || '#fa8c16'
|
||||
state.fillStyle = fillStyle || '#fa8c16'
|
||||
state.lineWidth = 5
|
||||
state.dash = 2
|
||||
node.animateFrames.push({
|
||||
duration: 500,
|
||||
linear: true,
|
||||
state
|
||||
});
|
||||
state.strokeStyle = strokeStyle?strokeStyle: '#fa8c16';
|
||||
state.dash = 0;
|
||||
state.lineWidth=1;
|
||||
state.fillStyle = '#ffffff';
|
||||
})
|
||||
state.strokeStyle = strokeStyle || '#fa8c16'
|
||||
state.dash = 0
|
||||
state.lineWidth = 1
|
||||
state.fillStyle = '#ffffff'
|
||||
node.animateFrames.push({
|
||||
duration: 500,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.strokeStyle = strokeStyle?strokeStyle: '#fa8c16';
|
||||
state.dash = 2;
|
||||
state.lineWidth=5;
|
||||
state.fillStyle = fillStyle?fillStyle: '#fa8c16';
|
||||
})
|
||||
state.strokeStyle = strokeStyle || '#fa8c16'
|
||||
state.dash = 2
|
||||
state.lineWidth = 5
|
||||
state.fillStyle = fillStyle || '#fa8c16'
|
||||
node.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
break;
|
||||
})
|
||||
break
|
||||
case 'error':
|
||||
state.strokeStyle = strokeStyle?strokeStyle: '#cf1322';
|
||||
state.fillStyle = fillStyle?fillStyle:'#cf132222';
|
||||
state.lineWidth=5;
|
||||
state.dash = 2;
|
||||
state.strokeStyle = strokeStyle || '#cf1322'
|
||||
state.fillStyle = fillStyle || '#cf132222'
|
||||
state.lineWidth = 5
|
||||
state.dash = 2
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
});
|
||||
state.strokeStyle = strokeStyle?strokeStyle:'#cf1322';
|
||||
state.fillStyle = '#ffffff';
|
||||
state.dash = 0;
|
||||
state.lineWidth=1;
|
||||
})
|
||||
state.strokeStyle = strokeStyle || '#cf1322'
|
||||
state.fillStyle = '#ffffff'
|
||||
state.dash = 0
|
||||
state.lineWidth = 1
|
||||
node.animateFrames.push({
|
||||
duration: 500,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.strokeStyle = strokeStyle?strokeStyle: '#cf1322';
|
||||
state.fillStyle = fillStyle?fillStyle:'#cf132222';
|
||||
state.dash = 2;
|
||||
state.lineWidth=5;
|
||||
})
|
||||
state.strokeStyle = strokeStyle || '#cf1322'
|
||||
state.fillStyle = fillStyle || '#cf132222'
|
||||
state.dash = 2
|
||||
state.lineWidth = 5
|
||||
node.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
break;
|
||||
})
|
||||
break
|
||||
case 'show':
|
||||
state.strokeStyle = strokeStyle?strokeStyle: '#fa541c';
|
||||
state.rotate = -5;
|
||||
state.strokeStyle = strokeStyle || '#fa541c'
|
||||
state.rotate = -5
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.rotate = 5;
|
||||
})
|
||||
state.rotate = 5
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.rotate = 0;
|
||||
})
|
||||
state.rotate = 0
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
break;
|
||||
})
|
||||
break
|
||||
case 'fade':
|
||||
state.strokeStyle = strokeStyle?strokeStyle: '#fa541c';
|
||||
state.globalAlpha = 0.3;
|
||||
state.strokeStyle = strokeStyle || '#fa541c'
|
||||
state.globalAlpha = 0.3
|
||||
node.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.globalAlpha = 0.5;
|
||||
})
|
||||
state.globalAlpha = 0.5
|
||||
node.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.globalAlpha = 0.8;
|
||||
})
|
||||
state.globalAlpha = 0.8
|
||||
node.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.globalAlpha = 1;
|
||||
})
|
||||
state.globalAlpha = 1
|
||||
node.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
break;
|
||||
})
|
||||
break
|
||||
}
|
||||
node.animatePlay=true;
|
||||
node.animatePlay = true
|
||||
}
|
||||
export function onChangeAnimateLine(line,type){
|
||||
line.animateType=type;
|
||||
line.animatePlay=true;
|
||||
export function onChangeAnimateLine (line, type) {
|
||||
line.animateType = type
|
||||
line.animatePlay = true
|
||||
}
|
||||
export function changeImage (dataImg, callback) {
|
||||
let self = this;
|
||||
var base64Img = document.createElement("base64Img"),
|
||||
canvas = document.createElement("canvas"),
|
||||
context = canvas.getContext("2d");
|
||||
// 创建新图片
|
||||
var img = new Image();
|
||||
img.src = dataImg;
|
||||
img.addEventListener(
|
||||
"load",
|
||||
function () {
|
||||
// 绘制图片到canvas上
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
context.drawImage(img, 0, 0);
|
||||
// const base64Img = document.createElement('base64Img')
|
||||
const canvas = document.createElement('canvas')
|
||||
const context = canvas.getContext('2d')
|
||||
// 创建新图片
|
||||
const img = new Image()
|
||||
img.src = dataImg
|
||||
img.addEventListener(
|
||||
'load',
|
||||
function () {
|
||||
// 绘制图片到canvas上
|
||||
canvas.width = img.width
|
||||
canvas.height = img.height
|
||||
context.drawImage(img, 0, 0)
|
||||
|
||||
// 将canvas的透明背景设置成白色
|
||||
var imageData = context.getImageData(
|
||||
0,
|
||||
0,
|
||||
canvas.width,
|
||||
canvas.height
|
||||
);
|
||||
for (var i = 0; i < imageData.data.length; i += 4) {
|
||||
//rgb大于250的透明度y均设置成0
|
||||
if (
|
||||
imageData.data[i] > 0 &&
|
||||
// 将canvas的透明背景设置成白色
|
||||
const imageData = context.getImageData(
|
||||
0,
|
||||
0,
|
||||
canvas.width,
|
||||
canvas.height
|
||||
)
|
||||
for (let i = 0; i < imageData.data.length; i += 4) {
|
||||
// rgb大于250的透明度y均设置成0
|
||||
if (
|
||||
imageData.data[i] > 0 &&
|
||||
imageData.data[i + 1] > 0 &&
|
||||
imageData.data[i + 2] > 0
|
||||
) {
|
||||
imageData.data[i + 3] = 200;
|
||||
}
|
||||
}
|
||||
context.putImageData(imageData, 0, 0);
|
||||
let baseImg = canvas.toDataURL("image/png");//返回base64
|
||||
if (typeof callback !== undefined) {
|
||||
if (callback) callback(baseImg);
|
||||
}
|
||||
img.remove();
|
||||
},
|
||||
false
|
||||
);
|
||||
}
|
||||
) {
|
||||
imageData.data[i + 3] = 200
|
||||
}
|
||||
}
|
||||
context.putImageData(imageData, 0, 0)
|
||||
const baseImg = canvas.toDataURL('image/png')// 返回base64
|
||||
if (typeof callback !== 'undefined') {
|
||||
if (callback) callback(baseImg)
|
||||
}
|
||||
img.remove()
|
||||
},
|
||||
false
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user