svg在html中动态画图

系列文章目录

---

---

前言

本系列文章主要记录项目过程中重点的项目技术

---

一、目标

通过下拉框隧道的名称，改变下方svg图的内容，通过定时器，定时查询隧道的信息，从而定时更改svg图，具体见下图图文说明

二、实现目标

1. 赋值给下拉框

1.定义下拉框

<div>请选择隧道<select id="rolltype" onchange="callMsg()"></select></div>

2.给下拉框赋值

    $(function(){
  	  $.ajax({
				type : "get",
				url : "${ctx}/lbst/tunnel/listData",
				dataType : "json",
				success : function(data) {
					//$("#rolltype").append("<option selected value=''>请选择</option>");
					for(var i=0;i<data.list.length;i++){
						$("#rolltype").append("<option selected value='"+data.list[i].id+"'>"+data.list[i].name+"</option>");
					}
					//$("#rolltype option[value='1315943992289075200']").prop("selected",true);

					callMsg();
				},
				error : function(data) {

				}
			});
  })

---

2查询svg图需要的数据

1.以下拉框中的值为条件查询svg显示所需的条件

  var callMsg = function(){
  	var tempValue = $("#rolltype").val();
	//如果发生改变
	getResultList(tempValue);
  }
 var getResultList = function(tempValue){
	   var URL = "${ctx}/lbst/location/realTimeData?tunnelId="+tempValue+"&pageCurrentName=2"
	   $.ajax({
			type : "get",
			url : URL,
			
			dataType : "json",
			success : function(data) {
				loadMap(data);
			},
			error : function(data) {

			}
		});
 }

---

3.画svg图

1.html代码

  <div id="suidao">
    <svg id="base"  >
    </svg>
    </div>
    <script src="${ctxStatic}/svg/js/svg.js"></script>
    <script src="${ctxStatic}/jquery/jquery-1.12.4.min.js"></script>

2.svg实现的js代码

var svgmap={}           //元素
 var base_rect;          //画布对象
 var drawpaint;          //画笔
 var realWidth = 0    //地图的宽
 var realHeight = 200     //地图的高
 var svgWidth = 0      //画布的宽
 var svgHeight = 200     //画布的高
 var drawingHeight = 20     //最下面线距离
 var carWidth = 20;//汽车图的宽
 var carHeight = 20;//汽车图的高
 var stationWidth = 40;//基站图的宽
 var stationHeight = 80;//基站图的高
 var stationLength = 100;//基站的纵坐标
 var carLength =svgHeight-carHeight-drawingHeight;//汽车图的最大起始位置高度坐标
 var finalStationY = 0;//最终基站图文字部分的纵坐标
 var elementType = {}
 elementType.baseRect = 0
 elementType.tower = 1
 elementType.car = 2
 elementType.other = 3;//画横坐标的0和最终点位置坐标
 
 
  var loadMap = function(dataValue){
	 //清空div中的svg画的内容
	 $("#suidao").html("<svg id='base'  ><svg id='drawing'/></svg>");
	 //clearAll();
	 if(dataValue.length <= 0){
		 return null;
	 }
	 
	 realWidth = dataValue[0].tunnelLength;
	 svgWidth = dataValue[0].tunnelLength;
	 if (SVG.supported) {
         drawpaint = SVG("base").size(svgWidth, svgHeight);
         //var fisrtRect = drawpaint.rect(100, 100).attr({ fill: '#f06'})
         create("base_rect", elementType.baseRect, 0, 0, svgWidth, svgHeight,0);
        
     }else{
         alert("浏览器不支持SVG！");
         return null;
     }
	//创建一个校验的数组
 	var checkArray = new Array();
  	for(var i =0;i<dataValue.length;i++){
  		var lable = false;
         if(checkArray.length > 0){
        	 for(var j =0;j<checkArray.length;j++){
 				if(checkArray[j]==dataValue[i].stationId){
 					lable = true;
 					break;
 				}
 			}
        	if(!lable){
        		checkArray[checkArray.length] = {};
        		checkArray[checkArray.length-1] = dataValue[i].stationId;
        	}
         }else{
        	checkArray[checkArray.length] = {};
     		checkArray[checkArray.length-1] = dataValue[i].stationId;
         }
         //X坐标
         carX = dataValue[i].lastDistance;
         //y坐标
         carY = parseInt(Math.random()*(dataValue[i].tunnelWidth-1)+1);
         create("car"+i, elementType.car, carX, carY, carWidth, carHeight,dataValue[i].tunnelWidth);
         //当lable==true的时候，表示stationID之前出现过
         if(!lable){
        	 towerX = dataValue[i].stationLocation;
        	 towerY = stationLength;
        	 create("tower"+i, elementType.tower, towerX, towerY, stationWidth, stationHeight,dataValue[i].tunnelWidth);
         }
             
             
  	}
  	 create("other1", elementType.other, 0, finalStationY, 0, finalStationY,0);
     create("other2", elementType.other, svgWidth, finalStationY, 0, finalStationY,0);
  
  }
    

     


 //画图
      function create(id, type, x, y, width, height,souceHeight){
          switch(type) {
            case elementType.baseRect:    //画两条线
            
                let temprect = drawpaint.line(0, 0, width,0 ).stroke({ width: 1 })
                temprect.fill("#fff")
                temprect.stroke({"color":"#000","width":"1"})
                temprect.attr({"id":id})
                base_rect = temprect
                changeLocation(id, type, 0, 0, width,0,souceHeight)
            
                let temprect2 = drawpaint.line(0, height, width,height ).stroke({ width: 1 })
                temprect2.fill("#fff")
                temprect2.stroke({"color":"#000","width":"1"})
                temprect2.attr({"id":id})
                base_rect = temprect2
                changeLocation(id, type, 0, height-drawingHeight, width,height-drawingHeight ,souceHeight)
                break;
            case elementType.tower:    //基站
               // width = width/widthRadio
               // height = height/heightRadio
                let temptower = drawpaint.image("${ctxStatic}/svg/img/tower.png")
                temptower.attr({"id":id})
                temptower.size(width, height)
                svgmap[id] = temptower
                let temptower_location = drawpaint.text(x+"米")
                temptower_location.attr({"id":id + "_location"})
                temptower_location.font({
                    family:   'Helvetica',
                    size:     12,
                })
                svgmap[id + "_location"] = temptower_location
                changeLocation(id, type, x, y, width, height,souceHeight)
                break;
            case elementType.car:   //汽车
               // width = width/widthRadio
               // height = height/heightRadio
                let tempcar = drawpaint.image("${ctxStatic}/svg/img/worker.png")
                tempcar.attr({"id":id})
                tempcar.size(width, height)
                svgmap[id] = tempcar

                let tempcar_location = drawpaint.text("(" + x + ", " + y + ")")
                tempcar_location.attr({"id":id + "_location"})
                tempcar_location.font({
                    family:   'Helvetica',
                    size:     10,
                })
                svgmap[id + "_location"] = tempcar_location
                changeLocation(id, type, x, y, width, height,souceHeight)
                break;
            case elementType.other:   //画横坐标起始点
            	let tempother_location = drawpaint.text(x+"米")
                tempother_location.attr({"id":id + "_location"})
                tempother_location.font({
                    family:   'Helvetica',
                    size:     12,
                })
                svgmap[id + "_location"] = tempother_location
                changeLocation(id, type, x, y, width, height,souceHeight)
                 break;
            default:
                break;
          }

      }
      //移动位置
      function changeLocation(id, type, x, y, width, height,souceHeight){
            switch(type) {
                case elementType.baseRect:    //基础矩形框
                    base_rect.x(drawpaint.x() + x)
                    base_rect.y(drawpaint.y() + y)
                    break;
                case elementType.tower:    //基站
                    //x = x/widthRadio
                   // y = y/heightRadio
                    let temptower = svgmap[id]
                    temptower.x(drawpaint.x() + x-width)
                    temptower.y(drawpaint.y() + y)
                    let temptower_location = svgmap[id + "_location"]
                    temptower_location.x(drawpaint.x() + x-width +temptower.width()/5)
                    temptower_location.y(drawpaint.y() + y+ temptower.height())
                    finalStationY = drawpaint.y() + y+ temptower.height();
                    break;
                case elementType.car:   //汽车
                    //x = x/widthRadio
                   // y = y/heightRadio
                    let tempcar = svgmap[id]
                    tempcar.x(drawpaint.x() + x-width)
                    tempcar.y(carLength-(drawpaint.y() + y*parseInt(carLength/souceHeight)))
                    let tempcar_location = svgmap[id + "_location"]
                    tempcar_location.x(drawpaint.x() + x-width)
                    tempcar_location.y(carLength-(drawpaint.y() + y*parseInt(carLength/souceHeight) )+ tempcar.height())
                    break;
                case elementType.other:   //画横坐标的起始位置
              
                    let tempother_location = svgmap[id + "_location"]
                	//判断是否是最终点，如果是，因为长度的原因，所以需要左移
                    if(x>0){
                    	tempother_location.x(drawpaint.x() + x-width-35)
                    }else{
                    	tempother_location.x(drawpaint.x() + x-width)
                    }
                    tempother_location.y(drawpaint.y()+height)
                    
                    break;
                default:
                  break;
          }
      }
      //清空svgmap
      function clearAll(){
        for(let key in svgmap) {
　　　　    document.getElementById(key).remove()
        }
        svgmap = {}
      }
      function clearById(id){
　　　　　　document.getElementById(id).remove()
           svgmap.remove(id)
      }

      function resize(id, width, height) {
          svgmap[id].size(widht/widthRadio, height/heightRadio)
      }

总结

至此，本文章结束