Entries

【VML】Pt.2 定義済みの図形2 arc polyline curve

この記事が気に入ったらポチっと→
Prev【VML】Pt.1 定義済みの図形1 line rect roundrect oval
Next【VML】Pt.3 定義済みの図形3 image

この３つでのFILLCOLORは大抵の場合背景と同じにしますが、原理的に分かりやすくするため背景に同化しない色を指定しています。もちろん背景を透明にすることもできますが。

【arc】
弧を描画します。

<DIV><V:ARC STARTANGLE="0" ENDANGLE="90" STROKECOLOR="#0000FF" STROKEWEIGHT="1" FILLCOLOR="#BBBBEE" STYLE="width:60px;height:60px;" /></DIV>

STARTANGLEは開始する角(0が真上)
ENDANGLEは終了する角(時計回り(負ならば反時計回り)に描画されます。)
弧においてFILLCOLORで塗りつぶされるのは、弧と弦によって囲われた部分になります。

【polyline】
折れ線を描画します。
line同様、width,heightは無視されます。

<DIV STYLE="width:90px;height:60px;"><V:POLYLINE POINTS="0 0 30 60 60 0 90 60" STROKECOLOR="#0000FF" STROKEWEIGHT="0" FILLCOLOR="#BBBBEE" /></DIV>
POINTSは2Dベクトルをスペースで区切って、x1 y1 x2 y2 x3 y3･･･と記述していきます（線はx1,y1→x2,y2→･･･と追って描画されます）。
折れ線において塗りつぶされるところは、始点と終点を結んでできた多角形の内部となります。

【curve】
3次ベジェ曲線を描画します。

<DIV STYLE="width:100px;height:50px;"><V:CURVE FROM="0,0" TO="100,50" CONTROL1="10,50" CONTROL2="90,0" STROKECOLOR="#0000FF" STROKEWEIGHT="1" FILLCOLOR="#BBBBEE" /></DIV>
FROM,CONTROL1,CONTROL2,TOはそれぞれ始点,操作点1,操作点2,終点を2Dベクトルで指定します。
CURVEにおいて塗りつぶされる部分は、始点と終点を結ぶ線と曲線によって囲われた部分となります。
曲線に関することはWikipedia:ベジェ曲線を参照してください。


【VML】Pt.1 定義済みの図形1 line rect roundrect oval

この記事が気に入ったらポチっと→
Prev【VML】VMLを使う前の準備
Next【VML】Pt.2 定義済みの図形2 arc polyline curve

【line】
直線を描画します。
このエレメントでは、CSSのwidth,heightなどは無視されます。

<DIV><V:LINE FROM="0,0" TO="100,50" STROKECOLOR="#0000FF" STROKEWEIGHT="1" STYLE="position:relative" /></DIV>

FROM には、始点を2次元ベクトルの点をx,yまたはx yという形式(以下2Dベクトル)で指定します。
TO には、終点を同様に2Dベクトルで指定します。

STROKECOLOR,STROKEWEIGHTはほとんどの定義済み図形に同じで、線の色、線の太さを指定します。


【rect】
rectは長方形を描画します。
lineとは違い、width,heightを指定できます。というよりwidth,heightによってサイズを指定します。

<DIV><V:RECT STROKECOLOR="#0000FF" STROKEWEIGHT="1" FILLCOLOR="#BBBBEE" STYLE="width:50px;height:30px;" /></DIV>

CSSのwidth,heightによってサイズを指定します。
FILLCOLORは面となる部分を持つ全ての定義済み図形に同じで、その塗りつぶしの色を指定します。

【roundrect】
角が丸い長方形を描画します。

<DIV><V:ROUNDRECT ARCSIZE="0.3" STROKECOLOR="#0000FF" STROKEWEIGHT="1" FILLCOLOR="#BBBBEE" STYLE="width:50px;height:40px;" /></DIV>

ARCSIZEは角となる円の大きさを0から1の少数で指定します。0ならば角は直角で長方形、1ならば短辺が半円になります。

【oval】
楕円を描画します。

<DIV><V:OVAL STROKECOLOR="#0000FF" STROKEWEIGHT="1" FILLCOLOR="#BBBBEE" STYLE="width:50px;height:30px;" /></DIV>

楕円はサイズに合わせて描画されます。幅、高さが同じなら円になります。




このエントリに飛んできた方は、VMLを使う前の準備に一度目を通すと良いかもしれません。


【VML】VMLを使う前の準備

この記事が気に入ったらポチっと→

Next【VML】Pt.1 定義済みの図形1 line rect roundrect oval

VMLについては私も習得中なので曖昧な記述があるかもしれません。

【下準備】
まずVMLを使うには、HTML部分やSTYLEの中に次のように指定する必要があります。

<HTML XMLNS:V="urn:schemas-microsoft-com:vml">

<STYLE>
v\:*{behavior:url(#default#VML);}
</STYLE>



【VMLのエレメント(<V:***>)について】
VMLのエレメントを大別すると次のようになります。

トップレベルエレメント(group,shape,shapetype)
サブエレメント(fill,shadow,textbox,...etc)
定義済みの図形(line,rect,oval,...etc)

定義済みの図形(点、円、曲線、弧など)は、本当はshapeというタグのみで書くことが出来ます。しかしながら、なぜ定義済みの図形があるのかというと、shapeの定義は高度であり編集が難しい、または長くなってしまうからです。
ただし、shapeを使ったほうが細かい図形を描画できるということは言うまでもありませんが。

トップレベルエレメント(shape,shapetype)は大抵、そのタグでサブエレメントを囲って詳細な情報がサブエレメントに記述されます。
定義済みの図形がサブエレメントを囲うこともできます。
またgroupはshape又は定義済みの図形をいくつか囲ってグループ化します。

【VMLとCSS】
VML図形のサイズ・位置などはCSSより指定します。
width,height,position,left,right,top,bottomなど。

また、VML特有のCSSプロパティがあります。
rotation=図形の中心を軸に回転する角度を指定
flip=x,y軸方向に裏返す　値:x または y

【問題】
ブラウザによってVMLの描画は、視覚的に少し変わります。
例えば私の使っているのでは、VMLの線の部分はアンチエイリアス(縁を少しだけぼかして滑らかにする機能)が自動的にかけられています。少し前に使っていたものはアンチエイリアスがかかりませんでした。



また、VMLはXMLベースであるので、
<V:***></V:***>　の終了タグを省略するとき、
<V:*** />　と記述してください。




【JavaScript】平均、分散、標準偏差、偏差値の計算

この記事が気に入ったらポチっと→
配列から統計学的な値を算出するアルゴリズム

ここではデータの配列を
Data
とします。
また、JavaScriptの構文より、
Dataの配列の項の数を
Data.length
と表します。

【平均】
平均は知っての通りの方法。全てを足して個数で割る。
平均値Aveを、次の手順で算出できる。

Ave=0;
for(i=0;i<Data.length;i++)Ave+=Data[i];
Ave=Ave/Data.length;

【分散】
分散とは、それぞれのデータが、平均からどれだけ離れているかを表すもの。
これは、全ての、データと平均の差の２乗を足して、個数で割った値。
分散 Decを前述の平均値のAveを使って次の手順で算出できる。

Dec=0;
for(i=0;i<Data.length;i++)Dec+=Math.pow(Ave-Data[i],2);
Dec=Dec/Data.length;

【標準偏差】
標準偏差とはデータの散らばり具合を表す値。
これは、分散の正の平方根になる。
標準偏差Sdevを前述の分散Decを使って、次の式で算出できる。

Sdev=Math.sqrt(Dec);

【偏差値】
偏差値とは、あるデータが配列中のどれくらいの位置にあるかを表す値。
ある偏差値を求めたいデータData[k]における偏差値Devは、前述の平均Aveと標準偏差Sdevを使って、次の式で算出できる。

Dev=10*(Data[k]-Ave)/Sdev+50;


【CSS】chromaフィルタと、乗ると画像が変わるリンク

この記事が気に入ったらポチっと→
chromaは応用が利くのでついネタにしてしまう。


今回はこの画像



ちなみに青い部分は完全な青(#0000FF)です。

そこに、chromaをつけてやればもちろん↓

↑（ここにある）
のようになる
<IMG SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/forblog11.png" STYLE="width:15px;filter:chroma(color=#0000FF)">

青い部分だけ透明で他は白となっているから、この画像をSPANで囲ってその背景を#4466CCにすると

<SPAN STYLE="width:17px;background:#4466CC;"><IMG SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/forblog11.png" STYLE="filter:chroma(color=#0000FF);" WIDTH="17" HEIGHT="15"></SPAN>

とできる。
これと文字列"LINK"を右に置いて、アンカーで囲い、SPANにおけるスタイルをCSSに移し、CSSで次のように指定する。
<STYLE>
A{
background:#FFFFFF;
color:#4466CC;
}
A SPAN{
width:17px;
background:#4466CC;
}
A:hover{
background:#FFFFFF;
color:#8888EE;
}
A:hover SPAN{
width:17px;
background:#8888EE;
}
</STYLE>

(ちなみにここでのサンプルのために使われているコードは、ブログのスタイルが崩れないように一部変更しています。)

これでこんなリンクを作ることが出来る。

LINK

<A HREF="#"><SPAN><IMG SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/forblog11.png" STYLE="filter:chroma(color=#0000FF);" WIDTH="17" HEIGHT="15"></SPAN>LINK</A>

ちなみにこいつはNoraPHPでも似たようなものを置いています。


【野良犬式】N進数→10進数変換

この記事が気に入ったらポチっと→
こんなのは知らなくても、独自のやり方とかあるいは電卓を使えば済むことなので、重要ではないです･･･


2進→10進

例えばここに、
1001011101
という2進数があるが
�，海譴魄未琶�離して、
2to10_1
と書く。
�⊆，法�各数字の一つ下の行で、
右から、一番右を1として、順番に2倍になるように書く。
2to10_2
と書く。
��次に縦のそれぞれの列で掛け算して横線の下に答えを書く（2進数のときは、簡単に、１ならばその下の数を書き、0なら0を書くと考えればよい）。
2to10_3

�い△箸蓮�下にきた数を全て足して、

512+64+16+8+4+1=605

よって2進数1001011101は、10進数の605である。



尚、この技はどの進数から10進数に変換するときでもできる。
N進数から変換する場合、
�△�N倍になるように書けばよい。

が、N倍にしていくとき、2とか4,5など倍にするのが簡単な数でないと、面倒になる。


ちなみにわたしは1の2倍の連続するのは65536まで覚えてます。




数学的な説明↓

追記を表示



【CSS】スクロールバーを左側に置く direction

この記事が気に入ったらポチっと→
direction属性には、文章の方向を指定します。
ltr = 左から右
rtl = 右から左

例えば次のTEXTAREAのようなことが可能。

<TEXTAREA ROWS="4" COLS="20" STYLE="direction:rtl;"></TEXTAREA>

しかし実際は、右から左に書けるところで、読みにくくなるだけ。

なので普通は使うことはないのですが、この属性をrtlでBODYに使って、その中をDIVでltrに戻して、

<BODY STYLE="direction:rtl;">
<DIV ALIGN="left" STYLE="direction:ltr;">
〜〜〜本文あああ
</DIV>
</BODY>

となるようにすれば、

scrollbarleft


と、このように通常右にあるスクロールバーを左にやることができる。

はっきり言って意味はない。


【CSS】透過 フィルタ chroma

この記事が気に入ったらポチっと→
フィルタといえば、かなり派手なスタイルからユニークなスタイルまである、素晴らしくメモリやCPUを消費し更にブラウザによってはレイアウトが崩壊するなど、なかなかのアクションを持つ実装ですが、今回はその中の一つの１色透明化・Chromaフィルタの応用したものを紹介。



この200x40の背景画像
plasma

と

このDIVタグ

Norainu Blog is written by Norainu.
Chromaフィルタによる透過

<DIV STYLE="width:200px;height:40px;background:#FFFFFF;color:#0000FF;text-align:center;">Norainu Blog is written by Norainu.<BR>Chromaフィルタによる透過</DIV>



この2つと前述のフィルタをうまく使うと、次のようなものを表示できます。

Norainu Blog is written by Norainu.
Chromaフィルタによる透過


↑の表示を見て大体構造が分かる人は、かなりフィルタの作用の仕方を理解しているはず。


タグはこのようになっています。

<DIV STYLE="background:url(http://blog-imgs-16.fc2.com/n/o/r/noraphp/forblog.png);width:200px;height:40px;"><DIV STYLE="width:200px;height:40px;background:#FFFFFF;color:#0000FF;text-align:center;filter:Chroma(color=#0000FF);">Norainu Blog is written by Norainu.<BR>Chromaフィルタによる透過</DIV></DIV>

構造としては、DIVタグの青い文字の部分が透過され、DIVの後ろの背景となっている画像が透過された部分からのみ見えるようになります。

注意・・・中に入る文字列が大きいかったり斜めなどにしたりすると、最新のブラウザでアンチエイリアス(文字を見やすいようにすこしぼかす機能)が作用している場合、ぼかされて色が薄い部分だけ透過されず文字列を囲うように色がついてしまうので、文字列はなるべく簡素にするべきでしょう。


最初

この記事が気に入ったらポチっと→
NoraPHPでさえ更新遅滞しているというのにブログなんて続くのかという話ですが･･･。

しかしこの２年は恐らく忙しくなる、いや、本当は忙しくあるべきなので、更新が停滞したとしたらそれは忙しくなったか、または面倒になったかのいずれかでしょう･･･。


Appendix

最近の記事

プロフィール

Author:野良犬。
　HTML,VML,CSS,JS,PHPなど。
　基礎的なことを書こうかと思っていましたが、基礎の書かれたサイトやブログは多数あるので、珍しいことや応用などを中心に書こうかと。


ランキングに参加中！
FC2 Blog Ranking






最近のコメント

最近のトラックバック

ブロとも申請フォーム

この人とブロともになる

ブログ内検索