使用raphael画线，并且可拖拽线上点进行拖拽线条（小demo）

最新推荐文章于 2022-01-15 23:17:32 发布

_小郑有点困了

最新推荐文章于 2022-01-15 23:17:32 发布

阅读量717

点赞数

分类专栏： javascript raphael 文章标签： js

本文链接：https://blog.csdn.net/qq_44706619/article/details/114591743

版权

javascript 同时被 2 个专栏收录

68 篇文章 1 订阅

订阅专栏

raphael

3 篇文章 0 订阅

订阅专栏

使用raphael画线，并且可拖拽线上点进行拖拽线条
效果图1：（拖拽前）

在这里插入图片描述

效果图2：（拖拽后）
在这里插入图片描述
这个点是可以在线上移动的

应用场景：设备端前端页面（图为倒车影像，设备显示的辅助线）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #paper{
      width:500px;
      height:500px;
      background:url('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg');
      background-size: cover;
    }
  </style>
</head>
<body>
  <div id="paper"></div>
  <script src="js/jquery.1.12.1.min.js"></script>
  <script src="js/raphael.js"></script>
  <script>
    let width = 500
    let height = 500
    let paper = new Raphael(document.getElementById("paper"), width, height)

    // let array = getRandomData()

    //以下可以利用高级而且简洁一点的循环遍历进行命名和实现画线

    let arr = [
      {
        name1:'one',
        x1:120,
        y1:50,
        x2:380,
        y2:220,
        value1:1,
        value2:2,
      },
    ]
    let arr1 = [
      {
        name1:'two',
        x1:120,
        y1:150,
        x2:480,
        y2:220,
        value1:1,
        value2:2,
      },
    ]
    
    //计算斜率  目的是这条线不仅仅是利用仅有坐标画出的线段,而是拥有斜率的充满画布的线
    let computedLine = function(item){
      // 求斜率 x * k + b = y
      let k = (item.y2 - item.y1) / (item.x2 - item.x1)
      let b = item.y1 - item.x1 * k
      // 使 y = 0，求 x
      item.y3 = 0
      item.x3 = k === 0 ? -b : -b / k
      // 使 y = height，求 x
      item.y4 = height
      item.x4 = k === 0 ? height - b : (height - b) / k
    }

    //首次绘制  后面就只进行更改坐标即可
    let startDrow = function(arr){
      arr.forEach((item,index)=>{
        computedLine(item)


        let path = paper.path(`M${item.x3} ${item.y3}L${item.x4} ${item.y4}`).attr({
          stroke: 'red',
          'stroke-width': 2
        })
        paper.circle(item.x1, item.y1, 10).attr({
          fill: '#FF6767',
          stroke: 'red',
          'stroke-width': 2,
          'cursor': 'all-scroll'
        })
        paper.circle(item.x2, item.y2, 10).attr({
          fill: '#FFF',
          stroke: 'red',
          'stroke-width': 2,
          'cursor': 'all-scroll'
        })
        // paper.text(item.x1, item.y1,  item.value1).attr({
        //   'font-size': '12',
        //   'fill': '#fff',
        //   'text-anchor': 'middle',
        //   'cursor': 'all-scroll',
        // })
        // paper.text(item.x2, item.y2,  item.value2).attr({
        //   'font-size': '12',
        //   'fill': 'red',
        //   'text-anchor': 'middle',
        //   'cursor': 'all-scroll'
        // })
      })
      //命名为的是进行标记元素  方便判断鼠标按下的dom元素
      document.getElementsByTagName('path')[0].setAttribute('data-id','onePath')
      document.getElementsByTagName('circle')[0].setAttribute('data-id','onePoint')
      document.getElementsByTagName('circle')[1].setAttribute('data-id','twoPoint')
    }
    startDrow(arr)
    startDrow(arr1)

    let isDone = false  //防止鼠标松开粘连
    //更新位置   
    let updateDrow = function(arr){
      console.log('执行更新')
      computedLine(arr[0])
      //线
      document.getElementsByTagName('path')[0].setAttribute('d',`M${arr[0].x3} ${arr[0].y3}L${arr[0].x4} ${arr[0].y4}`)

      //点
      document.getElementsByTagName('circle')[0].setAttribute('cx',arr[0].x1)
      document.getElementsByTagName('circle')[0].setAttribute('cy',arr[0].y1)
      document.getElementsByTagName('circle')[1].setAttribute('cx',arr[0].x2)
      document.getElementsByTagName('circle')[1].setAttribute('cy',arr[0].y2)
      //文字
    }
    

    let clickDom
    //按下事件
    document.addEventListener('mousedown',function(target,event){
      // console.log('按下',$(target)[0].target.attributes['data-id'])
      if($(target)[0].target.attributes['data-id']){
        isDone = true
        clickDom = $(target)[0].target.attributes['data-id'].nodeValue // point-id、text-point-id
      }
    })
    var wraps = document.getElementById('paper')
    //移入画布  只有当点击的元素是点的时候才可以进行拖拽
    let newClientX
    let newClientY
    wraps.addEventListener('mousemove',function(target, event){
      if(isDone){
        let clientX = 0 // 用来判断鼠标是否移动
        let clientY = 0
        let _self = this
        newClientX = target.clientX
        newClientY = target.clientY
        if(clickDom&&clickDom=='onePoint'){
          // console.log(newClientX,newClientY)
          arr[0].x1 = newClientX
          arr[0].y1 = newClientY
          updateDrow(arr)
          // startDrow()
          // document.getElementsByTagName('circle')[0].attr({cx:  arr[0].x1, cy:arr[0].y1})
        }else if(clickDom&&clickDom=='twoPoint'){
          arr[0].x2 = newClientX
          arr[0].y2 = newClientY
          updateDrow(arr)
        }else{
          return
        }
      }
    })
    //鼠标抬起
    document.addEventListener('mouseup',function(target, event){
      console.log('监控到')
      isDone = false
      return
    })
    //鼠标离开
    document.addEventListener('mouseleave',function(target, event){
      isDone = false
      return
    })
  </script>
</body>
</html>

引入的js可自行去官网下载
在这里插入图片描述

_小郑有点困了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用raphael画线，并且可拖拽线上点进行拖拽线条（小demo）

使用raphael画线，并且可拖拽线上点进行拖拽线条效果图1：（拖拽前）效果图2：（拖拽后）这个点是可以在线上移动的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #paper{ width:500px; height:500
复制链接

扫一扫