使用raphael.js画车道线（泊位线）

最新推荐文章于 2022-06-10 14:39:50 发布

_小郑有点困了

最新推荐文章于 2022-06-10 14:39:50 发布

阅读量478

点赞数

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

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

版权

javascript 同时被 2 个专栏收录

68 篇文章 1 订阅

订阅专栏

raphael

3 篇文章 0 订阅

订阅专栏

使用raphael.js画车道线（泊位线）

效果图

在这里插入图片描述

场景

设备拍照上传，但是仅仅有图片，不够明显的显示问题，就要前端来绘制这个车道线（不可拖拽）。

后端数据（坐标形式）

在图片中以图片左上角作为坐标系远点，我这里后端返回的是以百分比的形式，例如一个点x,y就是距离左上的百分比距离。
TODO：因为raphael限制path绘制的方法需要传入具体的像素值，所以，需要先获取图片的实际尺寸再进行转换成实际像素值。

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基础画线</title>
  <style>
    #paper{
      width:500px;
      height:700px;
      background:url('img/car3.jpg');
      background-size: cover;
    }
  </style>
</head>
<body>
  <div id="paper"></div>
  <script src="js/raphael.js"></script>
  <script>
    let width = 500
    let height = 700
    let paper = new Raphael(document.getElementById("paper"), width, height)
    //模拟四点百分比  todo
    let lineData = [
      //左上 
      {
        x:24,    
        y:11,
      },//左下
      {
        x:-8,
        y:85
      },
      //右下
      {
        x:51,
        y:86,
      },//右上
      {
        x:51,
        y:11
      } 
    ]
    //横线位置   todo
    let crossData ={
      0:[
        //左上交点
        {
          y:26,
          x:0,
        },
        //左下
        {
          x:0,
          y:48
        },
      ],
      1:[
        //右上
        {
          x:0,
          y:26,
        },
        
        //右下交点
        {
          y:48,
          x:0
        }
      ]
    }
    //绘制矩形取点顺序
    let sortArr = [
      [0,1],
      [2,3],
      [0,3],
      [1,2]
    ]
    //存斜率、常数项
    let crossLine = {
      0:{
        k:0,b:0
      },
      1:{
        k:0,b:0
      },
    }
    //先转换百分比为实际的值
    let exchaneData =function(item){
      item.x = parseInt(((item.x/100).toFixed(2))*500)
      item.y = parseInt(((item.y/100).toFixed(2))*700)
    }
    //转换四个点
    lineData.forEach((ite)=>{
      exchaneData(ite)
    })
    //转换横线的点
    for(var key in crossData){
      crossData[key].forEach((val,index)=>{
        exchaneData(val)
      })
    }
    
    //计算斜率  y=kx+b
    let computedLine = function(item,idx){
      //这里可能会出现  0/0 或者 x/0等  当x/0就有问题
      if(lineData[item[1]].x - lineData[item[0]].x==0){
        crossLine[idx].x = lineData[item[0]].x
      }else{
        crossLine[idx].k = (lineData[item[1]].y - lineData[item[0]].y) / (lineData[item[1]].x - lineData[item[0]].x).toFixed(2)
        crossLine[idx].b = lineData[item[0]].y - lineData[item[0]].x * crossLine[idx].k
      }
    }
    //水平线与两条竖线的焦点坐标 
    let computedDot = function(idx){
      crossData[idx].forEach((item)=>{
        //斜率分母可能为0  即k=infinity=b
        if(crossLine[idx].x){
          item.x = crossLine[idx].x
        }else{
          item.x = (item.y-crossLine[idx].b)/crossLine[idx].k
        }
      })
      
    }

    //raphael画线段 传入两点 {x:0,y:0},{x:0,y:0}
    let raphaelDraw = function(dot,dot1,type){
      let attr = {
        stroke: 'blue',
        'stroke-width': 2,
      }
      if(type==='dashed'){
        attr['stroke-dasharray'] = '-'
      }
      paper.path(`M${dot.x} ${dot.y}L${dot1.x} ${dot1.y}`).attr(attr)
    }
    
    //绘制矩形 
    sortArr.forEach((arr,idx)=>{
      if(idx==0||idx==1){
        //绘制的时候计算斜率
        computedLine(arr,idx)
        // console.log('斜率','y1='+crossLine[idx].k+'x'+'+'+crossLine[idx].b)
        //利用斜率算出横线的交点坐标
        computedDot(idx)
      }
      //画矩形
      raphaelDraw(lineData[arr[0]],lineData[arr[1]],'')
    })
    //画横线  左边的点逐个连向右侧的点
    crossData[0].forEach((item,index)=>{
      raphaelDraw(item,crossData[1][index],'dashed')
    })
    
  </script>
</body>
</html>

_小郑有点困了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用raphael.js画车道线（泊位线）

使用raphael.js画车道线（泊位线）效果图场景设备拍照上传，但是仅仅有图片，不够明显的显示问题，就要前端来绘制这个车道线（不可拖拽）。后端数据（坐标形式）在图片中以图片左上角作为坐标系远点，我这里后端返回的是以百分比的形式，例如一个点x,y就是距离左上的百分比距离。TODO：因为raphael限制path绘制的方法需要传入具体的像素值，所以，需要先获取图片的实际尺寸再进行转换成实际像素值。代码<!DOCTYPE html><html lang="en">&
复制链接

扫一扫