nezha-nezha-fronted/nezha-fronted/src/components/common/project/L5/services/canvas.js

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 function canvasRegister(){
  registerFlow();
  registerActivity();
  registerSequence();
  registerChart();
  // registerClass()
}

export const Tools=[
  {
    group:'基本形状',
    children:[
      // {
      //   name:'rectangleImg',
      //   icon:'icon-rect',
      //   data:{
      //     text:'rect',
      //     rect:{
      //       width:100,
      //       height:100
      //     },
      //     paddingLeft:10,
      //     paddingRight:10,
      //     paddingTop:10,
      //     paddingBottom:10,
      //     name:'rectangleImg',
      //     icon: '\ue680',
      //     iconFamily: 'nz-icon',
      //     iconColor: ''
      //   }
      // },
      {
        name: 'rectangle',
        icon: 'icon-cube',
        data: {
          rect: {
            width: 100,
            height: 100
          },
          is3D: true,
          z: 20,
          zRotate: 15,
          name: 'myCube',
          iconFamily: 'topology',
          iconColor: '#777',
          iconSize: 30
        }
      },
      {
        name:'rectangle',
        icon:'icon-rect',
        data:{
          text:'rect',
          rect:{
            width:100,
            height:100
          },
          paddingLeft:10,
          paddingRight:10,
          paddingTop:10,
          paddingBottom:10,
          name:'rectangle',
        }
      },
      {
        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',
          // icon: '\ue680',
          // iconFamily: 'nz-icon',
          // iconColor: ''
        }
      },
      {
        name:'circle',
        icon:'icon-circle',
        data:{
          text:'circle',
          rect:{
            width:100,
            height:100
          },
          name:'circle',
          textMaxLine:1
        }
      },
      {
        name:'triangle',
        icon:'icon-triangle',
        data:{
          text:'triangle',
          rect:{
            width:100,
            height:100
          },
          name:'triangle'
        }
      },
      {
        name:'diamond',
        icon:'icon-diamond',
        data:{
          text:'diamond',
          rect:{
            width:100,
            height:100
          },
          name:'diamond'
        }
      },
      {
        name:'pentagon',
        icon:'icon-pentagon',
        data:{
          text:'pentagon',
          rect:{
            width:100,
            height:100
          },
          name:'pentagon'
        }
      },
      {
        name:'hexagon',
        icon:'icon-hexagon',
        data:{
          text:'hexagon',
          rect:{
            width:100,
            height:100
          },
          paddingTop:10,
          paddingBottom:10,
          name:'hexagon'
        }
      },
      {
        name:'pentagram',
        icon:'icon-pentagram',
        data:{
          text:'pentagram',
          rect:{
            width:100,
            height:100
          },
          name:'pentagram'
        }
      },
    ]
  },
  {
    group: '自定义组件',
    children: [],
  },
];

export const imageTemp={
  name: 'rectangleImg',
  icon: 'icon-image',
  data: {
    "type":0,
    "rect":{
      "x":922,
      "y":406,
      "width":100,
      "height":100,
    },
    "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)';
  }
  // 必须判空再填充
  (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 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) {
  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;
}
/*自定义图片组件*/

/*自定义立方体*/
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;
  
  
  // LINE MODE
  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.stroke();
  (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.stroke();
  (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.stroke();
  (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 onChangeAnimate(node,animateType) {
  if (node.animateType === 'custom') {
    return;
  }
  
  node.animateFrames = [];
  const state = Node.cloneState(node);
  switch (animateType) {
    case 'upDown':
      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;
    case 'leftRight':
      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;
      node.animateFrames.push({
        duration: 80,
        linear: true,
        state: Node.cloneState(state)
      });
      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;
      node.animateFrames.push({
        duration: 30,
        linear: true,
        state: Node.cloneState(state)
      });
      node.animateFrames.push({
        duration: 300,
        linear: true,
        state: Node.cloneState(node)
      });
      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;
      node.animateFrames.push({
        duration: 100,
        linear: true,
        state
      });
      node.animateFrames.push({
        duration: 400,
        linear: true,
        state: Node.cloneState(node)
      });
      break;
    case 'success':
      state.strokeStyle = '#237804';
      node.animateFrames.push({
        duration: 100,
        linear: true,
        state
      });
      node.animateFrames.push({
        duration: 100,
        linear: true,
        state: Node.cloneState(node)
      });
      state.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.fillStyle = '#389e0d22';
      node.animateFrames.push({
        duration: 3000,
        linear: true,
        state
      });
      break;
    case 'warning':
      state.strokeStyle = '#fa8c16';
      state.fillStyle = '#fa8c16';
      state.lineWidth=5;
      state.dash = 2;
      node.animateFrames.push({
        duration: 500,
        linear: true,
        state
      });
      state.strokeStyle = '#fa8c16';
      state.dash = 0;
      state.lineWidth=1;
      state.fillStyle = '#ffffff';
      node.animateFrames.push({
        duration: 500,
        linear: true,
        state: Node.cloneState(state)
      });
      state.strokeStyle = '#fa8c16';
      state.dash = 2;
      state.lineWidth=5;
      state.fillStyle = '#fa8c16';
      node.animateFrames.push({
        duration: 300,
        linear: true,
        state: Node.cloneState(state)
      });
      break;
    case 'error':
      state.strokeStyle = '#cf1322';
      // state.fillStyle = '#cf132222';
      state.lineWidth=5;
      state.dash = 2;
      node.animateFrames.push({
        duration: 100,
        linear: true,
        state
      });
      state.strokeStyle = '#cf1322';
      state.dash = 0;
      state.lineWidth=1;
      node.animateFrames.push({
        duration: 500,
        linear: true,
        state: Node.cloneState(state)
      });
      state.strokeStyle = '#cf1322';
      state.dash = 2;
      state.lineWidth=5;
      node.animateFrames.push({
        duration: 300,
        linear: true,
        state: Node.cloneState(state)
      });
      break;
    case 'show':
      state.strokeStyle = '#fa541c';
      state.rotate = -10;
      node.animateFrames.push({
        duration: 100,
        linear: true,
        state: Node.cloneState(state)
      });
      state.rotate = 10;
      node.animateFrames.push({
        duration: 100,
        linear: true,
        state: Node.cloneState(state)
      });
      state.rotate = 0;
      node.animateFrames.push({
        duration: 100,
        linear: true,
        state: Node.cloneState(state)
      });
      break;
  }
  node.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);

                        // 将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 &&
                                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
                );
            }