gjerp_ui/src/views/zyjhzx/hxianpgong/comps/person.js

import Konva from "konva";

export default function (width,height){
  const _width=width*0.5,_height=120

  const container=function (){
    const x=14,y=45

    const layer=new Konva.Layer({
      x:x,
      y:y,
    })

    const group=new Konva.Group({
      x:0,
      y:0,
      width:_width,
      height:_height,
      draggable: true,
      dragBoundFunc:function (pos){
        return {
          x:pos.x,
          y:y
        }
      },
    })

    const bgGroup=new Konva.Group({
      x:0,
      y:0,
    })
    bgGroup.clipFunc(function(ctx) {
      ctx.rect(6, 0, width*0.5+0.5, 182);
    });

    const imageObj = new Image();
    imageObj.src = require('@/assets/pwan/personbg.png');
    imageObj.onload = function () {
      const shape = new Konva.Image({
        x: 0,
        y: 0,
        offsetX:6,
        width: width*0.515,
        height:182*0.8,
        image: this,
      });
      bgGroup.add(shape)
      shape.zIndex(0)
    }

    layer.add(bgGroup)
    bgGroup.zIndex(0)
    bgGroup.add(group)

    return {layer,group}
  }

  let currentWork=null;
  let selectedShape=null;

  const getCurrentWorker=function (){
    return currentWork
  }

  const person=function (index,persons={}){

    const width=120,height=110
    const x=index*125+(index+1)+14,y=5
    const group=new Konva.Group({
      x:x,
      y:y,
      width:width,
      height:height
    })

    group.on('click touchstart',function (){
      currentWork=persons
    })

    const selectObj = new Image();
    selectObj.src = require('@/assets/sliao/selected.png');
    let selectShape=null
    const setSelectShape=function (shape){
      selectShape=shape
    }
    selectObj.onload = function () {
      const shape = new Konva.Image({
        x: 83,
        y: 0,
        width: 39,
        height:39,
        image: this,
        visible:false
      });
      group.add(shape)
      shape.zIndex(0)
      setSelectShape(shape)
    }

    group.on('click touchstart',function (){
      currentWork=persons
      if (selectedShape){
        selectedShape.hide()
        if (selectedShape===selectShape){
          selectedShape=null
          return
        }
      }
      selectedShape=selectShape
      selectedShape.show()
    })

    const bgObj = new Image();
    bgObj.src = require('@/assets/sliao/personbg1.png');
    bgObj.onload = function () {
      const shape = new Konva.Image({
        x: 0,
        y: 0,
        offsetX:4,
        width: 137*0.95,
        height:155*0.80,
        image: this,
      });
      group.add(shape)
      shape.zIndex(0)
    }

    const imageObj = new Image();
    imageObj.src = require('@/assets/sliao/headImage.png');
    imageObj.onload = function () {
      const shape = new Konva.Image({
        x: 0,
        y: 0,
        offsetX:-4,
        offsetY:-10,
        width: 126*0.9,
        height:134*0.80,
        image: this,
      });
      group.add(shape)
      shape.zIndex(0)
    }
    const text=new Konva.Text({
      x:0,
      y:75,
      width:width,
      height:height,
      fill:'#fff',
      text: persons.userName,
      align: 'center',
      verticalAlign:'middle',
      fontSize:12
    })
    group.add(text)

    return group
  }

  return{
    container,person,getCurrentWorker
  }
}