webgl中新增一個div框實現框選
阿新 • • 發佈：2018-11-06
在webgl的開發中，新增一個div，可以實現框選的樣式。過程很簡單，直接看程式碼吧，這裡主要實現了點選第一次的時候確定div的位置，第二次實時顯示div的大小及樣式。這裡為了顯示實在canvas上畫div，將canvas設定為紅色。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script src="../library/three.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>滑鼠框選效果</title> <style> * { padding: 0; margin: 0; } #bottom { position: absolute; bottom: 0px; width: 100%; height: 40px; border: 1px solid #000; background: #000; color: #fff; } .tempDiv { border: 1px dashed blue; background: #5a72f8; position: absolute; width: 0; height: 0; filter: alpha(opacity:10); opacity: 0.1; } </style> <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById('canvas-frame'); var gl = canvas.getContext("webgl"); gl.clearColor(0.0, 1.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); document.onmousedown = function(e){ var posx = e.clientX; var posy = e.clientY; var div = document.createElement("div"); div.className = "tempDiv"; div.style.left = e.clientX+"px"; div.style.top = e.clientY+"px"; document.body.appendChild(div); document.onmousemove = function (ev) { div.style.position = "absolute"; div.style.left = Math.min(ev.clientX, posx) + "px"; div.style.top = Math.min(ev.clientY, posy) + "px"; div.style.width = Math.abs(posx - ev.clientX)+"px"; div.style.height = Math.abs(posy - ev.clientY)+"px"; document.onmouseup = function(){ div.parentNode.removeChild(div); document.onmousemove = null; document.onmouseup = null; } } } } </script> </head> <body> <!--<div id="bottom"></div>--> <canvas id="canvas-frame" width="1200" height="800"></canvas> </body> </html>
這裡實現了框，具體怎麼選上構件，下次補充。。。