zrender应用

最新推荐文章于 2024-08-09 07:03:27 发布
最新推荐文章于 2024-08-09 07:03:27 发布
阅读量455 收藏
点赞数
文章标签： javascript 前端 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/diaojw090/article/details/130248630
版权 
/*
@name: FactoryMap
@author: diaojw
@time: 2022-10-17 08:41:24
@description:
*/
import React, {useEffect, useRef, useState} from 'react';
import  * as zrender from 'zrender'
import CanvasPainter from "zrender/lib/canvas/Painter";
import {message} from "antd";
import {Props, StoreEnum} from "@pages/deviceBindWeb/typing";
import {reqGetCameraLocationInfo} from "@pages/deviceBindWeb/api2";
import {reqCameamInfo} from "@components/treeData/api";
import {treeNodeCameraInfo} from "@/utils/commonTools";

interface Interface {
 paddingLeft:any;
 bindSuccessStatus:any
}

let zr:any= {}
// zrender group实例
let group:any = null
let  cameraPoint:any= null
let  myImgInitAarr:any= []
let scale= 1


const FactoryMap: React.FC<Interface & Props> = (props) => {
 const { paddingLeft,state, dispatch, bindSuccessStatus } = props
 // init, Group, Image, Circle
 const imageInit = useRef<any>(null)
  let cameraImg = 'http://10.88.1.103/audio/img/摄像机.png'
  let imgWidth= 0 // 大图宽度
  let  imgHeight= 0 // 大图高度
  let  whRatio= 0 // 大图比例
  let  frameScale= 0 // 缩放比
  let  frameScaleW= 0 // 缩放比
  let  position:any= [0,0] // 拖动位置
  let scaleMax= 25 // 最大比例
  let scaleMin= 1 // 最小比例
 const [currentMapUrl, setCurrentMapUrl] = useState('')
 const [allCameraForMap, setAllCameraForMap] = useState([])
 const [allCameraUpdateForMap, setAllCameraUpdateForMap] = useState([])
 const [clickCameraInfo, setClickCameraInfo] = useState<any>({})// 点击当前摄像头信息
 const [isAddDrawCamera, setIsAddDrawCamera] = useState(false)


 // 地图切换时,绑定或解绑时
 useEffect(()=>{
  let data = state[StoreEnum.currentMapUrlObj]
  if(data ){
   console.log('当前地图地址', data)
   setCurrentMapUrl(data?.mapUrl)
   setAllCameraForMap([])
   // 查询所有摄像头位置
   getGetCameraLocationInfo(data?.mapNo)
   group && group.removeAll()
  }
  return ()=>{
   sessionStorage.removeItem('posArrStr')
   // dispatch({
   //   type: StoreEnum.currentMapUrlObj,
   //   value:undefined
   // })
  }
 },[state[StoreEnum.currentMapUrlObj], bindSuccessStatus])
 // 地图切换时,重新绘制地图,初始化绘制，组织树显示隐藏时
 useEffect(()=>{
  if(currentMapUrl && allCameraForMap.length>0){
   initCanvas()
  } else if(currentMapUrl && allCameraForMap.length ===0){
   initCanvas()
  }
  return ()=>{
  }
 },[currentMapUrl,allCameraForMap, paddingLeft])

 // 查询摄像头位置信息借口
 const getGetCameraLocationInfo = async (mapNo:string)=>{
  const res:any = await reqGetCameraLocationInfo({mapNo, cameraIp: ''}) // currentInfoObj?.cameraIp
  setAllCameraForMap(res.data)
 }

 // 初始化时，必须注册zrender,否则部署线上报错
 zrender.registerPainter("canvas", CanvasPainter);
 // 初始化绘制，组织树显示隐藏时，获取已绑定摄像头位置时，重新绘制canvas
 useEffect(()=>{
  let dataPosition = state[StoreEnum.currentCameraBindPostion]
  let dataDirection = state[StoreEnum.cameraDirection]
  console.log('state[StoreEnum.cameraDirection]', state[StoreEnum.cameraDirection], dataPosition, clickCameraInfo)
  // 如果操作是就点击时不绘制图标
  if(dataPosition && dataPosition?.isRender && isAddDrawCamera){
   group.remove(cameraPoint)
   newDrawMark({})
  } else if((dataPosition && dataPosition?.isRender || dataDirection && dataDirection?.isRender) && !isAddDrawCamera) {
   let newArrClone = JSON.parse(JSON.stringify(allCameraForMap))
   newArrClone.map((item:any)=>{
    if(item.cameraIp == clickCameraInfo.cameraIp){
     let extraInfoObj = {coordX: dataPosition.coordX, coordY: dataPosition.coordY, direction: dataDirection.direction}
     item.extraInfo = JSON.stringify(extraInfoObj)
    }
   })
   console.log('dddddddddddddd', myImgInitAarr)
   myImgInitAarr.map((item:any)=>{
    group.remove(item)
   })
   drawInitMark(newArrClone)
  }
  return ()=>{
   console.log('destory----------------------')
   // dispatch({
   //   type: StoreEnum.currentCameraBindPostion,
   //   value: undefined
   // })
  }
 },[state[StoreEnum.currentCameraBindPostion], state[StoreEnum.cameraDirection], clickCameraInfo])
 // 初始化函数
 const initCanvas = () =>{
  // 获取放置画布的元素
  const container:any = document.getElementById('canvas')
  // 初始化zr实例 zrender容器
  zr = zrender.init(container)
  // @ts-ignore
  group = new zrender.Group({ slient: true }) // 组内子孙元素是否响应鼠标事件
  // 创建图片对象
  const imgs:any = imageInit.current
  // 图片的src等于大图的地址
  imgs.crossOrigin = 'Anonymous'
  imgs.src = currentMapUrl+`?timestamp=${Date.now()}`
  imgs.onerror = (_:any) => {
   message.error('图片加载失败！')
   return false
  }
  // 图片加载成功后
  imgs.onload = () => {
   const canvasWidth = container.clientWidth
   const canvasHeight = container.clientHeight
   // 画布宽高比
   const canvasRatio = canvasWidth / canvasHeight
   // 图片的宽高比
   whRatio = imgs.width / imgs.height
   const originalHeight = imgs.height
   const originalWidth = imgs.width
   // 图片相对于画布的尺寸进行调整
   // 如果图片的宽高比大于画布的宽高比
   if (whRatio > canvasRatio) {
    imgs.width = canvasWidth
    imgs.height = imgs.width / whRatio
   } else {
    imgs.height = canvasHeight
    imgs.width = imgs.height * whRatio
   }
   // 对图片的宽高进行调整
   imgWidth = imgs.width
   imgHeight = imgs.height
   frameScaleW = originalWidth / imgWidth
   frameScale = originalHeight / imgHeight
   // 绘制图片
   const myImg = new zrender.Image({
    style: {
     image: currentMapUrl+`?timestamp=${Date.now()}`,
     x: 0,
     y: 0,
     width: imgWidth,
     height: imgHeight,
    },
    z: 1,
    onmouseover: (_:any) => {
     document.body.style.overflowY = 'hidden'
    },
    onmousewheel: (_:any) => {
     document.body.style.overflowY = 'hidden'
    },
    onmouseout: (item:any) => {
     document.body.style.overflowY = ''
    }
   })
   // 将图片绘制至子节点中
   group.add(myImg)
   // 调整图片在canvas中的位置
   if (zr.getWidth() > imgWidth) {
    group.position[0] = (zr.getWidth() - imgWidth) / 2
   }
   if (zr.getHeight() > imgHeight) {
    group.position[1] = (zr.getHeight() - imgHeight) / 2
   }
   // 将子节点添加至画布中
   zr.add(group)
   // 绘制mark
   drawInitMark(allCameraForMap)
   // 调用鼠标的滚动事件
   handleZoom()
   // 调用鼠标的拖拽事件
   handleDrop()
   // 绘制摄像头位置
   // let dataPosition = state[StoreEnum.currentCameraBindPostion]
   // dataPosition?.isRender && newDrawMark(dataPosition)
  }
 }
 // 坐标框的转换
 const AssemblyData = (newArr:any) => {
  newArr[0] = Math.round(newArr[0] /= frameScaleW)
  newArr[1] = Math.round(newArr[1] /= frameScale)
  return JSON.parse(JSON.stringify(newArr))
  const arr = newArr.map((item:any) => {
   return Math.round(item /= frameScale)
  })
  return arr
 }
 // 初始化地图相机标记
 const drawInitMark = (dataParams:any) =>{
  let arr:any = []
  dataParams.length>0 && dataParams.forEach((item:any, index:any) => {
   let extraInfo = JSON.parse(item.extraInfo)
   let myImgInit = new zrender.Image({
    style: {
     image: cameraImg,
     x: extraInfo?.coordX ,
     y: extraInfo?.coordY ,
     width: 25,
     height: 18,

    },
    z: 10,
    draggable: false,
    rotation: extraInfo?.direction * Math.PI/180,  // 旋转角度
    // originX: extraInfo?.coordX - 10 ,  // 设置中心点
    // originY: extraInfo?.coordY - 25  // 设置中心点
    originX: extraInfo?.coordX + 12.5/scale ,  // 设置中心点
    originY: extraInfo?.coordY + 9/scale   // 设置中心点
   }).on('click',(e:any)=>{
    let clickXY = {x:e.target.style.x, y: e.target.style.y}
    if(dataParams.length>0){
     dispatch({
      type:StoreEnum.currentCameraBindPostion,
      value: undefined
     })
     dispatch({
      type:StoreEnum.cameraDirection,
      value: undefined
     })
     let currentIpObj:any = dataParams.find((item:any)=> {
      let coordXYObj = JSON.parse(item.extraInfo)
      return (clickXY.x == coordXYObj.coordX) && (clickXY.y == coordXYObj.coordY)
     })
     console.log('绘制图片摄像头--点击图片666---', e, dataParams, currentIpObj)
     group.remove(cameraPoint)
     getCameraInfo(currentIpObj?.cameraIp)
    }

   },{test:'test'})
   group.add(myImgInit)
   arr.push(myImgInit)
  })
  myImgInitAarr = arr
 }
 // 点击地图上添加相机标记
 const newDrawMark = (opt:any) =>{
  let posXY = sessionStorage.posArrStr ? JSON.parse(sessionStorage.posArrStr) : null
  let updateDirection = sessionStorage.updateDirection ? JSON.parse(sessionStorage.updateDirection) : 0
  console.log('ssssssssssssssssssssss', posXY, opt?.coordX)
  if(!posXY && !opt?.coordX){
   return
  }
  cameraPoint = new zrender.Image({
   style: {
    image: cameraImg,
    // x: posXY ? posXY[0] - 10: opt?.coordX - 10,
    // y: posXY ? posXY[1] - 25: opt?.coordY - 25,
    x: posXY ? posXY[0] : opt?.coordX ,
    y: posXY ? posXY[1] : opt?.coordY ,
    width: 25/scale,
    height: 18/scale,
   },
   z: 10,
   draggable: false,
   rotation: updateDirection * Math.PI/180,  // 旋转角度
   originX: posXY ? posXY[0] + 12.5/scale : opt?.coordX ,  // 设置中心点
   originY: posXY ? posXY[1] + 9/scale : opt?.coordY  // 设置中心点
  }).on('mouseup',(e:any)=>{
   // 新建相机不能点击
   // let posArr = [e.event.zrX - position[0]  , e.event.zrY - position[1]]
   // let newPosArr = AssemblyData(posArr)
   // sessionStorage.posArrStr = JSON.stringify(newPosArr)
   // dispatch({
   //   type: StoreEnum.cameraPos,
   //   value: posArr
   // })
  }).on('click',(e:any)=>{
   // 新建相机不能点击
   // let clickXY = {x:e.target.originX, y: e.target.originY}
   // if(allCameraForMap.length>0){
   //   let currentIpObj:any = allCameraForMap.find((item:any)=> {
   //    let coordXYObj = JSON.parse(item.extraInfo)
   //    return (clickXY.x == coordXYObj.coordX) && (clickXY.y == coordXYObj.coordY)
   //   })
   //   console.log('绘制图片摄像头--点击图片666---', e, allCameraForMap, currentIpObj)
   //   getCameraInfo(currentIpObj?.cameraIp)
   //
   // }


  })
  // sessionStorage.setItem('waitRmoveElement',JSON.stringify(cameraPoint))
  group.add(cameraPoint)
  // 画完清空坐标
  // sessionStorage.removeItem('posArrStr')

 }
 // 滚动缩放
 const handleZoom = () => {
  // 在画布子节点上监听鼠标滚轮事件  事件对象
  group.on('mousewheel', (ev:any) => {
   // wheeldata 返回值说明：正值向上滚动，负值向下滚动 均为120的倍数 缩小20倍 结果可能是 +e.wheelDelta/20 或者是 -e.wheelData/20
   // 缩小20倍数 调整为10
   // 监听到鼠标再
   const e = ev.wheelDelta / 5
   // scale原始的缩放比例是1 每次滚动在这个基础上加上或者减去滚轮缩放后的数据
   scale += e
   // 调用缩放的函数 将缩放的比例传入
   setScale(scale)
   group.eachChild(function (groupImg:any) {
    console.log('groupImg', groupImg)
    // 缩放时摄像头大小不会变
    if(groupImg.style.image.includes('摄像机')){
     groupImg.attr({
      style:{ width: 25/scale, height: 18/scale}
     })
    }
   })


  })
 }
 /** * 缩放 */
 const setScale = (sca:any) => {
  if (sca > scaleMax) {
   sca = scaleMax
  } else if (sca < scaleMin) {
   sca = scaleMin
  }
  scale = sca
  group.attr({
   scale: [scale, scale],
   origin: [zr.getWidth() / 2, zr.getHeight() / 2]
  })
 }
 // 拖拽方法
 const handleDrop = () => {
  zr.dragData = {
   drag: false,
   pos: [0, 0],
   group: null,
   target: null
  }
  // 画 摄像头
  zr.on('dblclick', (e:any) => {
   let tramsformX = group.transform ? Math.abs(group.transform[4])/scale : 0
   let tramsformY = group.transform ? Math.abs(group.transform[5])/scale : 0
   // 画布拖拽的起始位置是 事件对象中的画布的坐标位置
   let posArr = [(e.event.zrX/scale + tramsformX)   , (e.event.zrY/scale + tramsformY)  ]

   let newPosArr = AssemblyData(posArr)
   console.log('zr.dragData.pos', posArr,position, newPosArr)
   sessionStorage.posArrStr = JSON.stringify(newPosArr)
   dispatch({
    type: StoreEnum.cameraPos,
    value: posArr
   })
   if(sessionStorage.waitRmoveElement){
    console.log('removeEle',sessionStorage.waitRmoveElement)
    let removeEle = JSON.parse(sessionStorage.waitRmoveElement)
    group.remove(removeEle)
   }
   group.remove(cameraPoint)
   // initCanvas()
   // drawMark({})
   // 重置空值，避免添加相机后在修改相机,XY数据污染
   setClickCameraInfo({})
   setIsAddDrawCamera(true)
   dispatch({
    type: StoreEnum.currentCameraBindPostion,
    value: {coordX:newPosArr[0],coordY: newPosArr[1], isRender:true}
   })


  })
  zr.on('mousedown', (e:any) => {
   // 画布拖拽的起始位置是 事件对象中的画布的坐标位置
   let posArr = [e.event.zrX, e.event.zrY]
   zr.dragData.pos = posArr
   // 画布的拖拽目标
   zr.dragData.target = e.target
   if (e.target === undefined) {
    // !!!
    zr.dragData.drag = false
   } else if (e.target.parent && e.target.parent.type === 'group') {
    zr.dragData.drag = true
    zr.dragData.group = e.target.parent
   }
  })
  // 鼠标抬起事件 关闭拖拽  将拖拽的目标元素设置为空
  zr.on('mouseup', (e:any) => {
   zr.dragData.drag = false
   zr.dragData.group = null
  })
  // 鼠标移出事件 关闭拖拽
  zr.on('mouseout', (e:any) => {
   zr.dragData.drag = false
   zr.dragData.group = null
  })
  // 鼠标移动事件
  zr.on('mousemove', (e:any) => {
   console.log('zr.getWidth()', zr.getWidth(),scale,)
   if (zr.dragData.drag !== true) return
   const new_pos = [e.event.zrX, e.event.zrY]
   if (zr.dragData.group != null) {
    var pos = [
     new_pos[0] - zr.dragData.pos[0],
     new_pos[1] - zr.dragData.pos[1]
    ]
    zr.dragData.group.children().forEach((x:any) => {
     x.position = [0, 0]
    })
    zr.dragData.group.position[0] += pos[0]
    zr.dragData.group.position[1] += pos[1]
    zr.dragData.group.dirty()
    position[0] = zr.dragData.group.position[0]
    position[1] = zr.dragData.group.position[1]

   } else {

    // eslint-disable-next-line no-redeclare
    var pos = [
     new_pos[0] - zr.dragData.pos[0],
     new_pos[1] - zr.dragData.pos[1]
    ]
    zr.storage.getDisplayList(true, true).forEach((x:any) => {
     x.position[0] += pos[0]
     x.position[1] += pos[1]
     x.dirty()
    })
   }
   zr.dragData.pos = [e.event.zrX, e.event.zrY]
  })
 }
 // 获取摄像头信息
 const getCameraInfo = async (cameraIp:any) =>{
  let obj = {curPage: 1,pageSize: 1500,type: "GROUP",cameraIp, listUUID:1}
  const res = await reqCameamInfo(obj)
  const resdata = res.data
  if(resdata.code === 200){
   console.log('resdata.data',resdata.data.basicInfoList)
   let node = resdata.data.basicInfoList
   setIsAddDrawCamera(false)
   dispatch({
    type: StoreEnum.currentCameraInfo,
    value: { ...node[0], isClick: true }
   })
   setClickCameraInfo({ ...node[0], isClick: true })
  }
 }

 return (
  <div className={`factory-map-wrap`}>
   <img src="" alt="initImage" ref={imageInit}  style={{position:'absolute',top:'-10000000000px',width:'100%',height:'100%'}}/>
   <div id="canvas" style={{width:'100%', height:'100%', backgroundColor:'#F5F5F5'}}></div>
  </div>
 )
}

export default FactoryMap;/*
@name: FactoryMap
@author: diaojw
@time: 2022-10-17 08:41:24
@description:
*/
import React, {useEffect, useRef, useState} from 'react';
import  * as zrender from 'zrender'
import CanvasPainter from "zrender/lib/canvas/Painter";
import {message} from "antd";
import {Props, StoreEnum} from "@pages/deviceBindWeb/typing";
import {reqGetCameraLocationInfo} from "@pages/deviceBindWeb/api2";
import {reqCameamInfo} from "@components/treeData/api";
import {treeNodeCameraInfo} from "@/utils/commonTools";

interface Interface {
 paddingLeft:any;
 bindSuccessStatus:any
}

let zr:any= {}
// zrender group实例
let group:any = null
let  cameraPoint:any= null
let  myImgInitAarr:any= []
let scale= 1


const FactoryMap: React.FC<Interface & Props> = (props) => {
 const { paddingLeft,state, dispatch, bindSuccessStatus } = props
 // init, Group, Image, Circle
 const imageInit = useRef<any>(null)
  let cameraImg = 'http://10.88.1.103/audio/img/摄像机.png'
  let imgWidth= 0 // 大图宽度
  let  imgHeight= 0 // 大图高度
  let  whRatio= 0 // 大图比例
  let  frameScale= 0 // 缩放比
  let  frameScaleW= 0 // 缩放比
  let  position:any= [0,0] // 拖动位置
  let scaleMax= 25 // 最大比例
  let scaleMin= 1 // 最小比例
 const [currentMapUrl, setCurrentMapUrl] = useState('')
 const [allCameraForMap, setAllCameraForMap] = useState([])
 const [allCameraUpdateForMap, setAllCameraUpdateForMap] = useState([])
 const [clickCameraInfo, setClickCameraInfo] = useState<any>({})// 点击当前摄像头信息
 const [isAddDrawCamera, setIsAddDrawCamera] = useState(false)


 // 地图切换时,绑定或解绑时
 useEffect(()=>{
  let data = state[StoreEnum.currentMapUrlObj]
  if(data ){
   console.log('当前地图地址', data)
   setCurrentMapUrl(data?.mapUrl)
   setAllCameraForMap([])
   // 查询所有摄像头位置
   getGetCameraLocationInfo(data?.mapNo)
   group && group.removeAll()
  }
  return ()=>{
   sessionStorage.removeItem('posArrStr')
   // dispatch({
   //   type: StoreEnum.currentMapUrlObj,
   //   value:undefined
   // })
  }
 },[state[StoreEnum.currentMapUrlObj], bindSuccessStatus])
 // 地图切换时,重新绘制地图,初始化绘制，组织树显示隐藏时
 useEffect(()=>{
  if(currentMapUrl && allCameraForMap.length>0){
   initCanvas()
  } else if(currentMapUrl && allCameraForMap.length ===0){
   initCanvas()
  }
  return ()=>{
  }
 },[currentMapUrl,allCameraForMap, paddingLeft])

 // 查询摄像头位置信息借口
 const getGetCameraLocationInfo = async (mapNo:string)=>{
  const res:any = await reqGetCameraLocationInfo({mapNo, cameraIp: ''}) // currentInfoObj?.cameraIp
  setAllCameraForMap(res.data)
 }

 // 初始化时，必须注册zrender,否则部署线上报错
 zrender.registerPainter("canvas", CanvasPainter);
 // 初始化绘制，组织树显示隐藏时，获取已绑定摄像头位置时，重新绘制canvas
 useEffect(()=>{
  let dataPosition = state[StoreEnum.currentCameraBindPostion]
  let dataDirection = state[StoreEnum.cameraDirection]
  console.log('state[StoreEnum.cameraDirection]', state[StoreEnum.cameraDirection], dataPosition, clickCameraInfo)
  // 如果操作是就点击时不绘制图标
  if(dataPosition && dataPosition?.isRender && isAddDrawCamera){
   group.remove(cameraPoint)
   newDrawMark({})
  } else if((dataPosition && dataPosition?.isRender || dataDirection && dataDirection?.isRender) && !isAddDrawCamera) {
   let newArrClone = JSON.parse(JSON.stringify(allCameraForMap))
   newArrClone.map((item:any)=>{
    if(item.cameraIp == clickCameraInfo.cameraIp){
     let extraInfoObj = {coordX: dataPosition.coordX, coordY: dataPosition.coordY, direction: dataDirection.direction}
     item.extraInfo = JSON.stringify(extraInfoObj)
    }
   })
   console.log('dddddddddddddd', myImgInitAarr)
   myImgInitAarr.map((item:any)=>{
    group.remove(item)
   })
   drawInitMark(newArrClone)
  }
  return ()=>{
   console.log('destory----------------------')
   // dispatch({
   //   type: StoreEnum.currentCameraBindPostion,
   //   value: undefined
   // })
  }
 },[state[StoreEnum.currentCameraBindPostion], state[StoreEnum.cameraDirection], clickCameraInfo])
 // 初始化函数
 const initCanvas = () =>{
  // 获取放置画布的元素
  const container:any = document.getElementById('canvas')
  // 初始化zr实例 zrender容器
  zr = zrender.init(container)
  // @ts-ignore
  group = new zrender.Group({ slient: true }) // 组内子孙元素是否响应鼠标事件
  // 创建图片对象
  const imgs:any = imageInit.current
  // 图片的src等于大图的地址
  imgs.crossOrigin = 'Anonymous'
  imgs.src = currentMapUrl+`?timestamp=${Date.now()}`
  imgs.onerror = (_:any) => {
   message.error('图片加载失败！')
   return false
  }
  // 图片加载成功后
  imgs.onload = () => {
   const canvasWidth = container.clientWidth
   const canvasHeight = container.clientHeight
   // 画布宽高比
   const canvasRatio = canvasWidth / canvasHeight
   // 图片的宽高比
   whRatio = imgs.width / imgs.height
   const originalHeight = imgs.height
   const originalWidth = imgs.width
   // 图片相对于画布的尺寸进行调整
   // 如果图片的宽高比大于画布的宽高比
   if (whRatio > canvasRatio) {
    imgs.width = canvasWidth
    imgs.height = imgs.width / whRatio
   } else {
    imgs.height = canvasHeight
    imgs.width = imgs.height * whRatio
   }
   // 对图片的宽高进行调整
   imgWidth = imgs.width
   imgHeight = imgs.height
   frameScaleW = originalWidth / imgWidth
   frameScale = originalHeight / imgHeight
   // 绘制图片
   const myImg = new zrender.Image({
    style: {
     image: currentMapUrl+`?timestamp=${Date.now()}`,
     x: 0,
     y: 0,
     width: imgWidth,
     height: imgHeight,
    },
    z: 1,
    onmouseover: (_:any) => {
     document.body.style.overflowY = 'hidden'
    },
    onmousewheel: (_:any) => {
     document.body.style.overflowY = 'hidden'
    },
    onmouseout: (item:any) => {
     document.body.style.overflowY = ''
    }
   })
   // 将图片绘制至子节点中
   group.add(myImg)
   // 调整图片在canvas中的位置
   if (zr.getWidth() > imgWidth) {
    group.position[0] = (zr.getWidth() - imgWidth) / 2
   }
   if (zr.getHeight() > imgHeight) {
    group.position[1] = (zr.getHeight() - imgHeight) / 2
   }
   // 将子节点添加至画布中
   zr.add(group)
   // 绘制mark
   drawInitMark(allCameraForMap)
   // 调用鼠标的滚动事件
   handleZoom()
   // 调用鼠标的拖拽事件
   handleDrop()
   // 绘制摄像头位置
   // let dataPosition = state[StoreEnum.currentCameraBindPostion]
   // dataPosition?.isRender && newDrawMark(dataPosition)
  }
 }
 // 坐标框的转换
 const AssemblyData = (newArr:any) => {
  newArr[0] = Math.round(newArr[0] /= frameScaleW)
  newArr[1] = Math.round(newArr[1] /= frameScale)
  return JSON.parse(JSON.stringify(newArr))
  const arr = newArr.map((item:any) => {
   return Math.round(item /= frameScale)
  })
  return arr
 }
 // 初始化地图相机标记
 const drawInitMark = (dataParams:any) =>{
  let arr:any = []
  dataParams.length>0 && dataParams.forEach((item:any, index:any) => {
   let extraInfo = JSON.parse(item.extraInfo)
   let myImgInit = new zrender.Image({
    style: {
     image: cameraImg,
     x: extraInfo?.coordX ,
     y: extraInfo?.coordY ,
     width: 25,
     height: 18,

    },
    z: 10,
    draggable: false,
    rotation: extraInfo?.direction * Math.PI/180,  // 旋转角度
    // originX: extraInfo?.coordX - 10 ,  // 设置中心点
    // originY: extraInfo?.coordY - 25  // 设置中心点
    originX: extraInfo?.coordX + 12.5/scale ,  // 设置中心点
    originY: extraInfo?.coordY + 9/scale   // 设置中心点
   }).on('click',(e:any)=>{
    let clickXY = {x:e.target.style.x, y: e.target.style.y}
    if(dataParams.length>0){
     dispatch({
      type:StoreEnum.currentCameraBindPostion,
      value: undefined
     })
     dispatch({
      type:StoreEnum.cameraDirection,
      value: undefined
     })
     let currentIpObj:any = dataParams.find((item:any)=> {
      let coordXYObj = JSON.parse(item.extraInfo)
      return (clickXY.x == coordXYObj.coordX) && (clickXY.y == coordXYObj.coordY)
     })
     console.log('绘制图片摄像头--点击图片666---', e, dataParams, currentIpObj)
     group.remove(cameraPoint)
     getCameraInfo(currentIpObj?.cameraIp)
    }

   },{test:'test'})
   group.add(myImgInit)
   arr.push(myImgInit)
  })
  myImgInitAarr = arr
 }
 // 点击地图上添加相机标记
 const newDrawMark = (opt:any) =>{
  let posXY = sessionStorage.posArrStr ? JSON.parse(sessionStorage.posArrStr) : null
  let updateDirection = sessionStorage.updateDirection ? JSON.parse(sessionStorage.updateDirection) : 0
  console.log('ssssssssssssssssssssss', posXY, opt?.coordX)
  if(!posXY && !opt?.coordX){
   return
  }
  cameraPoint = new zrender.Image({
   style: {
    image: cameraImg,
    // x: posXY ? posXY[0] - 10: opt?.coordX - 10,
    // y: posXY ? posXY[1] - 25: opt?.coordY - 25,
    x: posXY ? posXY[0] : opt?.coordX ,
    y: posXY ? posXY[1] : opt?.coordY ,
    width: 25/scale,
    height: 18/scale,
   },
   z: 10,
   draggable: false,
   rotation: updateDirection * Math.PI/180,  // 旋转角度
   originX: posXY ? posXY[0] + 12.5/scale : opt?.coordX ,  // 设置中心点
   originY: posXY ? posXY[1] + 9/scale : opt?.coordY  // 设置中心点
  }).on('mouseup',(e:any)=>{
   // 新建相机不能点击
   // let posArr = [e.event.zrX - position[0]  , e.event.zrY - position[1]]
   // let newPosArr = AssemblyData(posArr)
   // sessionStorage.posArrStr = JSON.stringify(newPosArr)
   // dispatch({
   //   type: StoreEnum.cameraPos,
   //   value: posArr
   // })
  }).on('click',(e:any)=>{
   // 新建相机不能点击
   // let clickXY = {x:e.target.originX, y: e.target.originY}
   // if(allCameraForMap.length>0){
   //   let currentIpObj:any = allCameraForMap.find((item:any)=> {
   //    let coordXYObj = JSON.parse(item.extraInfo)
   //    return (clickXY.x == coordXYObj.coordX) && (clickXY.y == coordXYObj.coordY)
   //   })
   //   console.log('绘制图片摄像头--点击图片666---', e, allCameraForMap, currentIpObj)
   //   getCameraInfo(currentIpObj?.cameraIp)
   //
   // }


  })
  // sessionStorage.setItem('waitRmoveElement',JSON.stringify(cameraPoint))
  group.add(cameraPoint)
  // 画完清空坐标
  // sessionStorage.removeItem('posArrStr')

 }
 // 滚动缩放
 const handleZoom = () => {
  // 在画布子节点上监听鼠标滚轮事件  事件对象
  group.on('mousewheel', (ev:any) => {
   // wheeldata 返回值说明：正值向上滚动，负值向下滚动 均为120的倍数 缩小20倍 结果可能是 +e.wheelDelta/20 或者是 -e.wheelData/20
   // 缩小20倍数 调整为10
   // 监听到鼠标再
   const e = ev.wheelDelta / 5
   // scale原始的缩放比例是1 每次滚动在这个基础上加上或者减去滚轮缩放后的数据
   scale += e
   // 调用缩放的函数 将缩放的比例传入
   setScale(scale)
   group.eachChild(function (groupImg:any) {
    console.log('groupImg', groupImg)
    // 缩放时摄像头大小不会变
    if(groupImg.style.image.includes('摄像机')){
     groupImg.attr({
      style:{ width: 25/scale, height: 18/scale}
     })
    }
   })


  })
 }
 /** * 缩放 */
 const setScale = (sca:any) => {
  if (sca > scaleMax) {
   sca = scaleMax
  } else if (sca < scaleMin) {
   sca = scaleMin
  }
  scale = sca
  group.attr({
   scale: [scale, scale],
   origin: [zr.getWidth() / 2, zr.getHeight() / 2]
  })
 }
 // 拖拽方法
 const handleDrop = () => {
  zr.dragData = {
   drag: false,
   pos: [0, 0],
   group: null,
   target: null
  }
  // 画 摄像头
  zr.on('dblclick', (e:any) => {
   let tramsformX = group.transform ? Math.abs(group.transform[4])/scale : 0
   let tramsformY = group.transform ? Math.abs(group.transform[5])/scale : 0
   // 画布拖拽的起始位置是 事件对象中的画布的坐标位置
   let posArr = [(e.event.zrX/scale + tramsformX)   , (e.event.zrY/scale + tramsformY)  ]

   let newPosArr = AssemblyData(posArr)
   console.log('zr.dragData.pos', posArr,position, newPosArr)
   sessionStorage.posArrStr = JSON.stringify(newPosArr)
   dispatch({
    type: StoreEnum.cameraPos,
    value: posArr
   })
   if(sessionStorage.waitRmoveElement){
    console.log('removeEle',sessionStorage.waitRmoveElement)
    let removeEle = JSON.parse(sessionStorage.waitRmoveElement)
    group.remove(removeEle)
   }
   group.remove(cameraPoint)
   // initCanvas()
   // drawMark({})
   // 重置空值，避免添加相机后在修改相机,XY数据污染
   setClickCameraInfo({})
   setIsAddDrawCamera(true)
   dispatch({
    type: StoreEnum.currentCameraBindPostion,
    value: {coordX:newPosArr[0],coordY: newPosArr[1], isRender:true}
   })


  })
  zr.on('mousedown', (e:any) => {
   // 画布拖拽的起始位置是 事件对象中的画布的坐标位置
   let posArr = [e.event.zrX, e.event.zrY]
   zr.dragData.pos = posArr
   // 画布的拖拽目标
   zr.dragData.target = e.target
   if (e.target === undefined) {
    // !!!
    zr.dragData.drag = false
   } else if (e.target.parent && e.target.parent.type === 'group') {
    zr.dragData.drag = true
    zr.dragData.group = e.target.parent
   }
  })
  // 鼠标抬起事件 关闭拖拽  将拖拽的目标元素设置为空
  zr.on('mouseup', (e:any) => {
   zr.dragData.drag = false
   zr.dragData.group = null
  })
  // 鼠标移出事件 关闭拖拽
  zr.on('mouseout', (e:any) => {
   zr.dragData.drag = false
   zr.dragData.group = null
  })
  // 鼠标移动事件
  zr.on('mousemove', (e:any) => {
   console.log('zr.getWidth()', zr.getWidth(),scale,)
   if (zr.dragData.drag !== true) return
   const new_pos = [e.event.zrX, e.event.zrY]
   if (zr.dragData.group != null) {
    var pos = [
     new_pos[0] - zr.dragData.pos[0],
     new_pos[1] - zr.dragData.pos[1]
    ]
    zr.dragData.group.children().forEach((x:any) => {
     x.position = [0, 0]
    })
    zr.dragData.group.position[0] += pos[0]
    zr.dragData.group.position[1] += pos[1]
    zr.dragData.group.dirty()
    position[0] = zr.dragData.group.position[0]
    position[1] = zr.dragData.group.position[1]

   } else {

    // eslint-disable-next-line no-redeclare
    var pos = [
     new_pos[0] - zr.dragData.pos[0],
     new_pos[1] - zr.dragData.pos[1]
    ]
    zr.storage.getDisplayList(true, true).forEach((x:any) => {
     x.position[0] += pos[0]
     x.position[1] += pos[1]
     x.dirty()
    })
   }
   zr.dragData.pos = [e.event.zrX, e.event.zrY]
  })
 }
 // 获取摄像头信息
 const getCameraInfo = async (cameraIp:any) =>{
  let obj = {curPage: 1,pageSize: 1500,type: "GROUP",cameraIp, listUUID:1}
  const res = await reqCameamInfo(obj)
  const resdata = res.data
  if(resdata.code === 200){
   console.log('resdata.data',resdata.data.basicInfoList)
   let node = resdata.data.basicInfoList
   setIsAddDrawCamera(false)
   dispatch({
    type: StoreEnum.currentCameraInfo,
    value: { ...node[0], isClick: true }
   })
   setClickCameraInfo({ ...node[0], isClick: true })
  }
 }

 return (
  <div className={`factory-map-wrap`}>
   <img src="" alt="initImage" ref={imageInit}  style={{position:'absolute',top:'-10000000000px',width:'100%',height:'100%'}}/>
   <div id="canvas" style={{width:'100%', height:'100%', backgroundColor:'#F5F5F5'}}></div>
  </div>
 )
}

export default FactoryMap;
diaojw090
关注
ZRender
03-18
ZRender ZRender是Windows平台上的玩具软件光栅化应用程序，仅用于学习计算机图形学。 现在实现功能 画线 画三角形 纹理贴图 深度测试 phong底纹 模型转换 输出 纹理映射 转型 古劳阴影 阴影
zrender的使用文件
12-23
canvans,体温单绘制，三测单
ZRender （Canvas）简单使用（拖拽、缩放、旋转、文字、层级）
热门推荐
LynnhunAHa的博客
01-07 2万+
一、ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器； 二、下面是以图片做的简单demo，分为左中右三部分，左边是需要的图片，中间是绘图部分，右边是添加文字说明； &lt;body&gt; &lt;div id="container"&gt; &lt;div id="imgDiv" ...
ZRender: 轻量级二维绘图引擎实战指南
gitblog_00353的博客
08-08 1030
ZRender: 轻量级二维绘图引擎实战指南 项目地址:https://gitcode.com/gh_mirrors/zr/zrender 项目介绍 ZRender 是由 ECOM 团队开发的一款高效、轻量的二维绘图引擎。它支持多种渲染方式，包括 Canvas、SVG 和 VML，旨在为前端开发者提供强大的图形绘制能力。ZRender 不仅独立可用，还是知名数据可视化库 ECharts 的底层渲染...
二维绘图引擎ZRender
jdrunk的博客
12-13 3584
1、描述 ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。 2、下载 ZRender 项目在 gitHub ,也可以使用 npm install zrender 下载。 在 dist 目录下找到 zrender.js 和 zrender.min.js，前者是开发版，后者是发布版。 3、初始化 ZRender 在使...
zrender.rar
07-30
无论你是构建Web应用还是独立的可视化页面，其轻量级的特性使得它可以在各种环境下顺畅运行。通过简单的JavaScript代码，即可实现复杂的图形绘制，让数据以直观、生动的方式呈现出来。 在提供的压缩包文件中，我们...
zrender框架
06-07
综上所述，ZRender是一个强大的JavaScript图形库，能够帮助开发者快速构建具有互动性的2D图形应用。通过理解其基本概念、特性及使用方式，你可以有效地利用它来提升Web应用的视觉效果和用户体验。结合`pom.xml`和`...
zrender-2.0.8
05-23
《ZRender 2.0.8：Canvas绘图的创新力量》 ZRender是一个轻量级的Canvas类库，它的核心理念是为开发者提供一种高效、便捷的方式来处理Canvas绘图任务。版本2.0.8作为该库的一个稳定版本，为开发者带来了许多改进和...
zrender-2.1.1
05-06
ZRender广泛应用于数据分析、数据可视化、仪表盘、报表等领域，尤其在金融、电商、运营分析等场景中，它的强大功能和高效性能得到了广泛应用。 五、学习与实践 通过下载并研究ZRender 2.1.1的源码，开发者不仅可以...
data-visualization-sample:使用 ZRender 制作的示例图表
06-27
在实际应用中，ZRender可以结合其他前端框架（如React、Vue或Angular）使用，实现更复杂的数据可视化应用场景。同时，了解CSS可以帮助你更好地定制图表的样式，使其符合项目的整体设计风格。 总的来说，通过这个...
zrender-API
08-09
ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。
zrender.js
06-15
一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！
zrender-3.1.2-master ：轻量级、高性能、MVC架构、二维渲染引擎（提供 Canvas、SVG、VML 等多种渲染方式），完整官方源码
06-10
zrender-3.1.2-master ：轻量级、高性能、MVC架构、二维渲染引擎（提供 Canvas、SVG、VML 等多种渲染方式）、完整源码！
zrender1.1.2
05-07
zrender1.1.2，从官网下载，请大家放心使用。
zrender-2.1.1.zip
05-06
zrender-2.1.1　　官网下载，完整源码，附实例
zrender 知识：使用zrender搭建流程图工具
嘿嘿
05-02 4442
首先看下最终的效果图： 主要使用的技术是zrender.js和vue.js，zrender 用于实现流程图，vue搭建整体架构。 本篇文章主要面向对zrender有一定了解的同学。 本篇文章只讲解核心flowchart的实现方法。 一.分析 流程图主要包含节点node、联系edge以及组group三个部分。 功能主要有 添加节点 添加联系，分为节点与节点、节点与组、组与组之间的联系 添加组 删除功能 二.实现方式 实现一个flowEdito.
【ZRender 渲染引擎 - 贰】 | Vue 框架集成与绘制其他图元
张风捷特烈的博客
10-24 991
theme: cyanosis 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 8 天，点击查看活动详情 1. Vue 中使用 ZRender 上一篇中，我们通过最原始的方式体验了一下 ZRender 的使用。接下来，为了更方便管理绘制测试效果，使用 Vue 框架集成 ZRender 库。看完本篇应该能体会出这个管理的必要性，我们要完成如下的绘制样例展示效果...
探索ZRender：一个强大的JavaScript图形渲染库
gitblog_00043的博客
03-20 1551
探索ZRender：一个强大的JavaScript图形渲染库 项目地址:https://gitcode.com/gh_mirrors/zr/zrender 项目简介 是由阿里巴巴E-Commerce前端团队开发的一个轻量级、高性能的2D图形渲染引擎。这个项目致力于提供一套完整的API和工具集，帮助开发者在Web环境中进行各种复杂的图形绘制，包括但不限于数据可视化、图表制作、游戏场景搭建等。 技术分...
ZRender：轻量级2D图形库的卓越选择
最新发布
gitblog_00332的博客
08-09 351
ZRender：轻量级2D图形库的卓越选择 zrenderA lightweight graphic library providing 2d draw for Apache ECharts项目地址:https://gitcode.com/gh_mirrors/zr/zrender 在当今的软件开发领域，图形渲染是构建用户界面的关键组成部分。ZRender，作为一个轻量级的2D图形库，为开发者提...
ECharts模块化应用与ZRender本地依赖指南
zrender 的这些功能使得它能够被广泛应用于 Web 游戏、数据可视化、在线教育、大数据展示等多种场景。开发者可以根据项目需求选择是否直接使用 zrender 来进行更底层的控制和定制。 综合以上知识点，我们可以看到，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值