Entries
この記事が気に入ったらポチっと→
Prev【VML】Pt.2 定義済みの図形2 arc polyline curve
【image】
画像を表示します。
この画像表示では、IMGタグにはできない特有の属性があります。
ここでは、この132x176画像
を使用します。
▼これは単純な表示
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" />
▼刈り込み(部分表示)
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:99px;height:88px;" CROPLEFT="0.2" CROPRIGHT="0.05" CROPTOP="0.1" CROPBOTTOM="0.4" />
CROPLEFT,CROPRIGHT,CROPTOP,CROPBOTTOMは、それぞれ左、右、上、下からの刈り込み率(百分率(0~1))
width,heightの変更に注意。
▼コントラスト指定
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GAIN="8" />
GAINはコントラスト値(-128~128)[範囲詳しくは不明]
1=通常
0=灰色
-1=ネガ ←W3Cノートには記述されていませんでしたがやってみたところできるようです。原理上のことなのかは知りませんが…。
▼明るさ指定
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" BLACKLEVEL="0.3" />
BLACKLEVELは明るさの値(-1〜1)[範囲詳しくは不明](0.5、-0.5ぐらいでほぼ真っ白、真っ黒になります。)
▼ガンマ補正
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GAMMA="3" />
GAMMAはガンマ値(0＜値≦1000ぐらい)[範囲詳しくは不明](1が通常で0に近づくほど白く、1より大きくすると黒くなる。)
▼グレイスケール
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GRAYSCALE="true" />
GRAYSCALEはtrueまたはfalseを指定。[trueが肯定、falseが否定。以後この2値を真偽値という。]
▼2色(黒白)化
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" BILEVEL="true" />
BILEVELは真偽値を指定。
･･･と、imageには様々な属性がある。
恐らく使い道は少ないのでしょうけど。
尚、ここで登場している熱帯魚は実際に飼っているやつです(笑)
【image】
画像を表示します。
この画像表示では、IMGタグにはできない特有の属性があります。
ここでは、この132x176画像
を使用します。
▼これは単純な表示
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" />
▼刈り込み(部分表示)
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:99px;height:88px;" CROPLEFT="0.2" CROPRIGHT="0.05" CROPTOP="0.1" CROPBOTTOM="0.4" />
CROPLEFT,CROPRIGHT,CROPTOP,CROPBOTTOMは、それぞれ左、右、上、下からの刈り込み率(百分率(0~1))
width,heightの変更に注意。
▼コントラスト指定
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GAIN="8" />
GAINはコントラスト値(-128~128)[範囲詳しくは不明]
1=通常
0=灰色
-1=ネガ ←W3Cノートには記述されていませんでしたがやってみたところできるようです。原理上のことなのかは知りませんが…。
▼明るさ指定
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" BLACKLEVEL="0.3" />
BLACKLEVELは明るさの値(-1〜1)[範囲詳しくは不明](0.5、-0.5ぐらいでほぼ真っ白、真っ黒になります。)
▼ガンマ補正
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GAMMA="3" />
GAMMAはガンマ値(0＜値≦1000ぐらい)[範囲詳しくは不明](1が通常で0に近づくほど白く、1より大きくすると黒くなる。)
▼グレイスケール
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GRAYSCALE="true" />
GRAYSCALEはtrueまたはfalseを指定。[trueが肯定、falseが否定。以後この2値を真偽値という。]
▼2色(黒白)化
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" BILEVEL="true" />
BILEVELは真偽値を指定。
･･･と、imageには様々な属性がある。
恐らく使い道は少ないのでしょうけど。
尚、ここで登場している熱帯魚は実際に飼っているやつです(笑)
この記事が気に入ったらポチっと→
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:ベジェ曲線を参照してください。
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:ベジェ曲線を参照してください。
この記事が気に入ったらポチっと→
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を使う前の準備に一度目を通すと良いかもしれません。
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を使う前の準備に一度目を通すと良いかもしれません。
この記事が気に入ったらポチっと→
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:*** /> と記述してください。
この記事が気に入ったらポチっと→
配列から統計学的な値を算出するアルゴリズム
ここではデータの配列を
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;
ここではデータの配列を
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;
