T
op
S
CRIPTS
AUTO
M
OBILES
D
OWNLOADS
L
INK
B
BS
A
BOUT
F
EEDBACK
直線を引く(2)
説明
縦横1pxのDIVタグを連続出力し、ブラウザ上に線を引きます。 以前作ったもののプログラムを改良し、描画速度が約半分になりました。
サンプル
ソースコード
HEADに記述
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- //■画面上に線を描く関数 //■返り値:線を構成する縦横1pxのDIV群が格納されたDIVオブジェクト function drawLine(x1,y1,x2,y2,color){ var strW = "1px" //線の太さ var strH = "1px" //線の太さ var returnArray = new Array() var objPalatte = document.createElement("div") if((x1 == x2) || (y1 == y2)){ //傾き0または無限大 var objLine = document.createElement("div") var strColor = color with(objLine.style){ backgroundColor = strColor position = "absolute" overflow = "hidden" width = Math.abs(x2-x1+1) height = Math.abs(y2-y1+1) top = Math.min(y1,y2) + "px" left = Math.min(x1,x2) + "px" } objPalatte.appendChild(objLine) } else if(Math.abs(x1 - x2) > Math.abs(y1 - y2)){ // |傾き| < 1 var A = new Array(x1, y1) var B = new Array(x2, y2) P1 = (A[0] > B[0]) ? B : A //Xの値の小さいほう P2 = (A[0] <= B[0]) ? B : A //Xの値の大きいほう for(intX = P1[0]; intX <= P2[0]; intX++){ var intY = ((P2[1] - P1[1]) / (P2[0] - P1[0])) * (intX - P1[0]) + P1[1] objPalatte.appendChild(_drawLine(intX,intY,color)) } } else{ // |傾き| > 1 var A = new Array(x1, y1) var B = new Array(x2, y2) P1 = (A[1] > B[1]) ? B : A //Yの値の小さいほう P2 = (A[1] <= B[1]) ? B : A //Yの値の大きいほう for(intY = P1[1]; intY <= P2[1]; intY++){ var intX = ((P2[0] - P1[0]) / (P2[1] - P1[1])) * (intY - P1[1]) + P1[0] objPalatte.appendChild(_drawLine(intX,intY,color)) } } return document.body.appendChild(objPalatte) } function _drawLine(x,y,color){ var strColor = color //線の色 var strW = "1px" //線の太さ var strH = "1px" //線の太さ var objPoint = document.createElement("div") with(objPoint.style){ backgroundColor = strColor position = "absolute" overflow = "hidden" width = strW height = strH top = y + "px" left = x + "px" } return objPoint } //--> </SCRIPT>
BODYに記述
<input type="button" onclick="objLine=drawLine(50,50,320,500,'blue');" value="線を引く"> <input type="button" onclick="document.body.removeChild(objLine)" value="線を消す">
- [BACK] -
|
AUTO
M
OBILES
|
D
OWNLOADS
|
L
INK
|
B
BS
|
A
BOUT
|
F
EEDBACK
Copyright © 1999-2005 By よーすけ
mailto:<
web@@@write-off.cside.com
>