JavaScript+CSSで斜線を描画
|
HTMLじゃあ斜線を引けるタグは無いと思います。スタイルシートを使ってもできません。 Windows+IEであれば、Matrixフィルタ等を使用すれば可能かと思いますが、それじゃ面白くないし。 クロスブラウザで動作させたいのでJavaScriptで書いてみました //---------slantedLine.js---// var ce=function(name){
return document.createElement(name);
}//Prototype.jsで言うところのClass.create() var slantedLine=function() {this.initialize.apply(this, arguments);} slantedLine.prototype={ initialize:function(opt){ if((opt.startX+"" ).match(/\d+/) && (opt.startY+"" ).match(/\d+/)&&(opt.endX+"" ).match(/\d+/) && (opt.endY+"" ).match(/\d+/)){
this.startX=opt.startX;this.startY=opt.startY;this.endX=opt.endX;this.endY=opt.endY;
dot.style.cssText="position:absolute;width:1px;height:1px;background-Color:#000;overflow:hidden;";this.line=ce("div" ); this.width=this.startX-this.endX; this.height=this.startY-this.endY; this.color="#000"; if(opt.color) this.color=opt.color; var a=(Math.round((this.height/this.width)*1000))/1000; var b=this.startY-(a*this.startX); var start=this.startX, end=this.endX; if(start>end){
start=this.endX;
}end=this.startX; for(var i=start;i<=end;i++){
var dot=ce("div" );
dot.style.backgroundColor=this.color;
}dot.style.left=i; var top=(a*i)+b; dot.style.top=top; this.line.appendChild(dot);
}else alert("引数エラー" );
}} //---------slanted.html------// <html> <head> <script type="text/javascript" src="slanted.js"></script> <script type="text/javascript"> window.onload=function(){
var line=new slantedLine({startX:0,startY:0,endX:100,endY:100,color:"red"});
}document.body.appendChild(line.line); </script> </head> <body> </body> </html> 開始位置,終了位置(x,y座標)、色を含むjson形式のデータを渡してnewします。 2つの座標から、一次方程式を作ってるだけ。 できあがったオブジェクトのlineプロパティは斜線を描画したDivエレメントになってます。 実際には"線"ではなく、幅、高さ共に1pxのdivエレメントの集まりです。したがってかなりリソースを食います。 斜線の角度によっては、点線のようになってしまいます。ようは係数が整数なら綺麗に描画できるんですが、それ以外は画像のようになってしまう。
どうやればどんな角度でも綺麗に描画できるのかな?無理かな?追求してみたいと思います。 それにしても久々に1次方程式とか触れたけど、まったく覚えてなかった自分にorz＿ |
コメント（0）
トラックバック（1）
トラックバックされた記事
トラックバック先の記事
- トラックバック先の記事がありません。
