_ScalableGraphics.js

イメージ、シェイプ、文字列の描画をスケーラブルに行う機能を提供するクラス _ScalableGraphics が定義されています。

init() 関数内で以下の設定を有効にすることで、機能を付加できます。
_USE_DRAWSTRINGEXHTML5 Canvas テキストAPIをサポートしていない場合に <span> 要素を使用します。

コンストラクタ

_ScalableGraphics

_ScalableGraphics()

_ScalableGraphics コンストラクタです。

メソッド

canUseClip

canUseClip()

クリッピングをサポートしているかどうかチェックします。

戻り値:
クリッピングをサポートしている場合 true、サポートしていない場合 false

canUseText

canUseText()

HTML5 Canvas テキストAPIをサポートしているかどうかチェックします。

戻り値:
HTML5 Canvas テキストAPIをサポートしている場合 true、サポートしていない場合 false

setScale

setScale(scale)

拡大率を設定します。

パラメータ:
scale拡大率を指定します。1.0 で等倍になります。

scale

scale()

拡大率を取得します。

戻り値:
拡大率を返します。

getColorOfRGB

getColorOfRGB(r,g,b)

RGB値を指定してそのRGB値に対応するカラーを表す文字列を取得します。

パラメータ:
r赤要素の輝度を指定します(0〜255)。
g緑要素の輝度を指定します(0〜255)。
b青要素の輝度を指定します(0〜255)。

戻り値:
カラーを表す文字列を返します。

setStrokeWidth

setStrokeWidth(width)

拡大前での線幅を設定します。

パラメータ:
width拡大前での線幅を指定します。

setColor

setColor(color)

描画に使用する色を設定します。

パラメータ:
color描画に使用する色を指定します。

setAlpha

setAlpha(a)

描画で参照されるα値を設定します。

パラメータ:
aα値を指定します(0〜255)。

補足説明:
α値とは、255 で不透明、0 で完全な透明になる値です。

setROP

setROP(mode)

ラスタオペレーションを設定します。

パラメータ:
modeラスタオペレーションを指定します。次のいずれかを指定します。

_ROP_COPY 通常合成。
_ROP_ADD 加算合成。

setFont

setFont(size,family)

文字列描画に使用するフォントを設定します。

パラメータ:
size拡大前でのフォントサイズを指定します。
familyフォントファミリー名

stringWidth

stringWidth(str)

指定した文字列の、拡大前での幅を取得します。

パラメータ:
str文字列を指定します。

戻り値:
文字列を表示するのに必要な幅の、拡大前での値を返します。

補足説明:
本処理呼び出しの前に、setFont() メソッドでフォントを設定しておく必要があります。
DoJaでの Font クラスの stringWidth() メソッドに相当する機能です。

fontHeight

fontHeight()

フォントの拡大前での高さを取得します。

戻り値:
フォントの拡大前での高さを返します。

補足説明:
DoJaでの Font クラスの getHeight() メソッドに相当する機能です。

clearClip

clearClip()

現在設定されているクリッピング領域を解除します。

setClip

setClip(x,y,width,height)

引数によって指定された矩形をクリッピング領域として設定します。

パラメータ:
x拡大前での、新しいクリッピング領域の左上のX座標を指定します。
y拡大前での、新しいクリッピング領域の左上のY座標を指定します。
width拡大前での、新しいクリッピング領域の幅を指定します。
height拡大前での、新しいクリッピング領域の高さを指定します。

drawLine

drawLine(x1,y1,x2,y2)

直線を描画します。

パラメータ:
x1拡大前での、直線の描画開始点のX座標を指定します。
y1拡大前での、直線の描画開始点のY座標を指定します。
x2拡大前での、直線の描画終了点のX座標を指定します。
y2拡大前での、直線の描画終了点のY座標を指定します。

drawRect

drawRect(x,y,width,height)

矩形を描画します。

パラメータ:
x拡大前での、矩形の左上のX座標を指定します。
y拡大前での、矩形の左上のY座標を指定します。
width拡大前での、矩形の幅を指定します。
height拡大前での、矩形の高さを指定します。

fillRect

fillRect(x,y,width,height)

矩形領域を塗りつぶします。

パラメータ:
x拡大前での、矩形の左上のX座標を指定します。
y拡大前での、矩形の左上のY座標を指定します。
width拡大前での、矩形の幅を指定します。
height拡大前での、矩形の高さを指定します。

drawString

drawString(str,x,y)

文字列を描画します。

パラメータ:
str描画する文字列を指定します。
x拡大前でのX座標を指定します。
y拡大前でのY座標を指定します。ベースラインの座標を指定します。

setFlipMode

setFlipMode(flip)

イメージの描画時に反転または回転して描画を行うかどうかを設定します。

パラメータ:
flipイメージの描画時の反転または回転方法を指定します。次のいずれかを指定します。

_FLIP_NONE 反転しないことを表します。
_FLIP_HORIZONTAL 横方向に鏡像反転することを表します。
_FLIP_VERTICAL 縦方向に鏡像反転することを表します。
_FLIP_ROTATE 縦横方向に鏡像反転(180度回転)することを表します。

drawImage

drawImage(image,x,y)

イメージを描画します。

パラメータ:
image<img> 要素または Image オブジェクト
x拡大前でのX座標を指定します。
y拡大前でのY座標を指定します。

drawScaledImage

drawScaledImage(image,dx,dy,width,height,sx,sy,swidth,sheight)

イメージを拡大・縮小して描画します。

パラメータ:
image<img> 要素または Image オブジェクト
dx拡大前での、描画先の矩形の左上のX座標を指定します。
dy拡大前での、描画先の矩形の左上のY座標を指定します。
width拡大前での、描画先の矩形の幅を指定します。
height拡大前での、描画先の矩形の高さを指定します。
sx描画元の矩形の左上のX座標を指定します。
sy描画元の矩形の左上のY座標を指定します。
swidth描画元の矩形の幅を指定します。
sheight描画元の矩形の高さを指定します。

drawTransImage

drawTransImage(image,dx,dy,sx,sy,width,height,cx,cy,r360,z128x,z128y)

イメージを回転・拡大・縮小して描画します。

パラメータ:
image<img> 要素または Image オブジェクト
dx拡大前での、描画先のアンカーX座標を指定します。アンカー座標とは、回転・拡大・縮小の基準となる座標です。
dy拡大前での、描画先のアンカーY座標を指定します。アンカー座標とは、回転・拡大・縮小の基準となる座標です。
sx描画元の矩形の左上のX座標を指定します。
sy描画元の矩形の左上のY座標を指定します。
width描画元の矩形の幅を指定します。
height描画元の矩形の高さを指定します。
cx描画元の矩形の左からの相対X座標を指定します。この座標点とアンカー座標が一致するように描画されます。
cy描画元の矩形の上からの相対Y座標を指定します。この座標点とアンカー座標が一致するように描画されます。
r360回転角度を指定します。時計回りで、単位は「度」です。
z128xX方向の拡大率を指定します。128 で拡大率100%(等倍)です。
z128yY方向の拡大率を指定します。128 で拡大率100%(等倍)です。

補足説明:
本メソッドは setFlipMode() メソッドの設定を見ません。反転は、z128x および z128y の値をマイナス値にすることで行うことができます。