<head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta content="always" name="referrer"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0" name="viewport" /> <title>CITEK反向尋車</title> <script src="<%=basePath%>wui/js/jquery.js"></script> <link rel="stylesheet" href="<%=cssPath%>wui.css" type="text/css"></link> <script type="text/javascript" src="<%=basePath%>wui/js/line_tool.js"></script> <script type="text/javascript">var arrPosX = [], arrPosY = []; <s:iterator value="listNode" status="bean"> //設定路線中點的橫座標和縱座標的集合 arrPosX.push(<s:property value="posX" />); arrPosY.push(<s:property value="posY" />); </s:iterator> var arrRoundPosX = [], arrRoundPosY = []; //設定終點所在地區的範圍點橫座標和縱座標集合 <s:iterator value="positionsX" status="bean"> arrRoundPosX.push(<s:property />); </s:iterator> <s:iterator value="positionsY" status="bean"> arrRoundPosY.push(<s:property />); </s:iterator> var ctxBackground, canvasBackground; var ctxSource, canvasSource; var canvasWidth, canvasHeight; var imgStart, imgEnd, imgBackground,; var areaImage; var isStart = false; var scale = 1; var scaleInterval = 3; var scaleCount = 0; var runCount = 0; var step = 2; //像素 var moveX = 1; var moveY = 1; var currIndex = 0; var a = 0; var tmpIconPaths = [ //設定起點表徵圖 "<%=basePath%>img/point_start.png", ]; var imgObjArr = []; var iLoadIndex = 0; /** * 將表徵圖放入集合中 */ function loadIconImages(){ var oImg = new Image(); oImg.addEventListener('load', eventIconImagesLoaded, false); oImg.src = tmpIconPaths[iLoadIndex]; imgObjArr.push(oImg); } /** * 載入表徵圖 */ function eventIconImagesLoaded(){ iLoadIndex++; if(iLoadIndex <= 3) { loadIconImages(); } else { loadImage(); } } /** * 載入背景表徵圖 */ function loadImage(){ areaImage = new Image(); areaImage.addEventListener('load', eventAreaImageLoaded, false); areaImage.src ="<%=basePath%>image/img.jpg; } function eventAreaImageLoaded(){ initBase(); initScene(); initSprits(); start(); isStart = true; } /** * 初始化 */ function initBase() { imgStart = imgObjArr[0]; canvasBackground = document.getElementById("canvasBackground"); ctxBackground = canvasBackground.getContext("2d"); canvasSource = document.getElementById("canvasSource"); ctxSource = canvasSource.getContext("2d"); canvasWidth = areaImage.width; canvasHeight = areaImage.height; var bodyWidth = document.body.clientWidth-10; var bodyHeight = document.body.clientHeight-10; var tmpCavW = canvasWidth; var tmpCavH = canvasHeight; if(canvasWidth > bodyWidth) { canvasWidth = bodyWidth; canvasHeight = canvasWidth * (tmpCavH/tmpCavW); } if(canvasHeight > bodyHeight){ canvasHeight = bodyHeight; canvasWidth = canvasHeight * (tmpCavW/tmpCavH); } canvasBackground.width = canvasWidth; canvasBackground.height = canvasHeight; canvasSource.width = canvasWidth; canvasSource.height = canvasHeight; moveX = arrPosX[0] * canvasWidth; moveY = arrPosY[0] * canvasHeight; } /** * 初始化畫布 */ function initScene() { ctxBackground.drawImage(areaImage, 0, 0, canvasWidth, canvasHeight); } /** * 開始繪圖 */ function initSprits() { /* 繪製路線的白底 */ ctxBackground.beginPath(); ctxBackground.strokeStyle = "white"; ctxBackground.lineWidth = 8; ctxBackground.lineCap = "round"; ctxBackground.lineJoin = "miter"; ctxBackground.miterLimit = 30; for(var i=1; i < arrPosX.length; i++){ ctxBackground.moveTo(canvasWidth * arrPosX[i-1], canvasHeight * arrPosY[i-1]); //指定一條線段的起點 ctxBackground.lineTo(canvasWidth * arrPosX[i], canvasHeight * arrPosY[i]); //指定一條線段的終點 } ctxBackground.stroke(); /* 繪製路線的紅線 */ ctxBackground.beginPath(); //是通過覆蓋白底實現的 ctxBackground.strokeStyle = "rgba(255,0,0,1)"; ctxBackground.lineWidth = 4; ctxBackground.lineCap = "round"; ctxBackground.lineJoin = "miter"; ctxBackground.miterLimit = 30; for(var i=1; i < arrPosX.length; i++){ ctxBackground.moveTo(canvasWidth * arrPosX[i-1], canvasHeight * arrPosY[i-1]); //指定一條線段的起點 ctxBackground.lineTo(canvasWidth * arrPosX[i], canvasHeight * arrPosY[i]); //指定一條線段的終點 } ctxBackground.stroke(); /* 繪製終點地區 */ ctxSource.clearRect(0, 0, canvasWidth,canvasHeight); ctxBackground.beginPath(); ctxBackground.strokeStyle = "rgba(255,0,0,1)"; //顏色 ctxBackground.lineWidth = 0.5; ctxBackground.fillStyle = "rgba(255,0,0,0)"; //透明度 ctxBackground.moveTo(canvasWidth * arrRoundPosX[0], canvasHeight * arrRoundPosY[0]); //指定一條線段的起點 for(var i=1; i < arrRoundPosX.length; i++){ ctxBackground.lineTo(canvasWidth * arrRoundPosX[i], canvasHeight * arrRoundPosY[i]); //指定一條線段的終點 } ctxBackground.lineTo(canvasWidth * arrRoundPosX[0], canvasHeight * arrRoundPosY[0]); ctxBackground.closePath(); ctxBackground.fill(); ctxBackground.stroke(); /* 繪製起點表徵圖 */ ctxBackground.drawImage( imgStart, canvasWidth * arrPosX[0] - imgStart.width * 0.25, canvasHeight * arrPosY[0] - imgStart.height * 0.25 - imgStart.height * 0.25, imgStart.width * 0.5, imgStart.height * 0.5); } /** * 設定表徵圖的跳動 */ function loop(){ if(!isStart) return; if(scale > 1.8) scale = 1; if(scaleCount > 999999) scaleCount = 0; if(runCount > 999999) runCount = 0; ctxSource.save(); ctxSource.clearRect(0,0,canvasWidth,canvasHeight); /* 設定起點表徵圖的跳動 */ ctxSource.translate( canvasWidth * arrPosX[0] - imgStart.width * 0.25 +imgStart.width*0.25, canvasHeight * arrPosY[0] - imgStart.height * 0.25+imgStart.height*0.25); ctxSource.scale(scale, scale); ctxSource.shadowOffsetX = 3; // 陰影x軸位移 ctxSource.shadowOffsetY = 4; // 陰影y軸位移 ctxSource.shadowBlur = 2; // 模糊尺寸 ctxSource.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 顏色 ctxSource.drawImage( imgStart, - imgStart.width * 0.25, - imgStart.height * 0.25 - imgStart.height * 0.25, imgStart.width * 0.5, imgStart.height * 0.5); ctxSource.restore(); ctxSource.save(); /* 設定終點地區的透明度變化 */ if (runCount % 4 == 0) { a = a + 0.1; } if (a > 0.6) { a = 0; } ctxSource.strokeStyle = "rgba(255,0,0,1)"; ctxSource.lineWidth = 10; ctxSource.fillStyle = "rgba(255,0,0,"+a+")"; ctxSource.moveTo(canvasWidth * arrRoundPosX[0], canvasHeight * arrRoundPosY[0]); //指定一條線段的起點 for(var i=1; i < arrRoundPosX.length; i++){ ctxSource.lineTo(canvasWidth * arrRoundPosX[i], canvasHeight * arrRoundPosY[i]); //指定一條線段的終點 } ctxSource.lineTo(canvasWidth * arrRoundPosX[0], canvasHeight * arrRoundPosY[0]); ctxSource.closePath(); ctxSource.fill(); ctxSource.restore(); ctxSource.save(); scaleCount++; runCount++; if(scaleCount % scaleInterval == 0){ scale += 0.1; } } /** * 設定標題和圖片的長寬高和跳動頻率 */ function start(){ $("#monitor_list_box").width = canvasWidth + "px"; $("#monitor_list_box").height = canvasHeight + "px"; $("#canvasBackground").width = canvasWidth + "px"; $("#canvasBackground").height = canvasHeight + "px"; $("#canvasSource").width = canvasWidth + "px"; $("#canvasSource").height = canvasHeight + "px"; window.setInterval(loop,1000/30); //60幀 } </script> <style type="text/css"> #monitor_list_box {width:100%; height:auto; overflow: auto;} #monitor_list_box canvas {position:absolute;width:100%; height:auto;} </style><body><div id="monitor_list_box"> <canvas id="canvasBackground"> Your browser does not support the canvas element. </canvas> <canvas id="canvasSource"> Your browser does not support the canvas element. </canvas> </div></body>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
