ユーザ用ツール

サイト用ツール


レイヤ操作

Warning: Undefined array key -1 in /home/r4162016/public_html/loginas.co.jp/advmaster/reference/inc/html.php on line 1458

差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
レイヤ操作 [2021/11/30 15:17]
advmanager [layopt (レイヤ属性)]
レイヤ操作 [2022/11/16 10:09] (現在)
advmanager [image (画像の読み込み)]
行 5: 行 5:
 |storage|yes|画像ファイル名|読み込む画像の指定| |storage|yes|画像ファイル名|読み込む画像の指定|
 |layer|yes|base,任意のレイヤー名|画像を読み込むレイヤを指定する\\  baseを指定すると背景となる| |layer|yes|base,任意のレイヤー名|画像を読み込むレイヤを指定する\\  baseを指定すると背景となる|
-|page|no|fore(初期値)\\  back|表ページか裏ページか|+|page|no|fore(初期値)\\  back\\  both|表ページか裏ページか\\  bothは表裏両方|
 |visible|no|true\\  false(初期値)|見えるか見えないか| |visible|no|true\\  false(初期値)|見えるか見えないか|
 |index|no|整数|重ね合わせの順序を指定する\\  値が大きいほど手前になります\\  指定していない場合、新しいものが上になります| |index|no|整数|重ね合わせの順序を指定する\\  値が大きいほど手前になります\\  指定していない場合、新しいものが上になります|
 |left|no|px|表示させる位置 原点(画面左上)から右方向,下方向の座標add,subで相対位置が指定可能| |left|no|px|表示させる位置 原点(画面左上)から右方向,下方向の座標add,subで相対位置が指定可能|
 |top|no|px| | |top|no|px| |
-|orgx|no|left(初期値)\\  center|画像のx基準点を指定\\  [[座標系設定#ヒント|こちらも参照ください]]| +|orgx|no|left(初期値)\\ center\\ 数字\\ (add/sub)数字|画像のx基準点(原点)を指定\\  [[座標系設定#ヒント|こちらも参照ください]]| 
-|orgy|no|top(初期値)\\  center|画像のy基準点を指定\\  [[座標系設定#ヒント|こちらも参照ください]]|+|orgy|no|top(初期値)\\ center\\ 数字\\ (add/sub)数字|画像のy基準点(原点)を指定\\  [[座標系設定#ヒント|こちらも参照ください]]|
 |opacity|no|0~255|透明度255で通常0で完全透明| |opacity|no|0~255|透明度255で通常0で完全透明|
 |{{anchor:pos:pos}}|no|ol,ml,l,lc,c,rc,r,mr,or\\  tappoint, endtext|x座標を自動的に設定。\\  [[座標系設定#画像の横位置(X座標)設定|詳しくはこちら]]| |{{anchor:pos:pos}}|no|ol,ml,l,lc,c,rc,r,mr,or\\  tappoint, endtext|x座標を自動的に設定。\\  [[座標系設定#画像の横位置(X座標)設定|詳しくはこちら]]|
行 23: 行 23:
 |zv|no|パーセント|ズーム 垂直方向| |zv|no|パーセント|ズーム 垂直方向|
 |group|no|group名|[[使い方のヒント#group属性について|group属性についてはこちらを参照]]| |group|no|group名|[[使い方のヒント#group属性について|group属性についてはこちらを参照]]|
-|{{anchor:mode:mode}}|no|source-over,\\  source-in,\\  source-out,\\  source-atop,\\  destination-over,\\  destination-in,\\  destination-out,\\  destination-atop,\\  lighter,\\  copy,\\  xor,\\  multiply,\\  screen,\\  overlay,\\  darken,\\  lighten,\\  color-dodge,\\  color-burn,\\  hard-light,\\  soft-light,\\  difference,\\  exclusion,\\  hue,\\  saturation,\\  color,luminosity|参考サイト:\\  https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation\\  当サイトに掲載していない値を入力すると無視される| +|moregroup|no|group名|group属性で指定したgroup以外のgroupも設定した場合に使用。\\  [[使い方のヒント#group属性について|group属性についてはこちらを参照]]| 
-|rotate|no|整数|画像の原点を軸に時計回りに回転0と360は同じとなる|+|{{anchor:mode:mode}}|no|source-over,\\  source-in,\\  source-out,\\  source-atop,\\  destination-over,\\  destination-in,\\  destination-out,\\  destination-atop,\\  lighter,\\  copy,\\  xor,\\  multiply,\\  screen,\\  overlay,\\  darken,\\  lighten,\\  color-dodge,\\  color-burn,\\  hard-light,\\  soft-light,\\  difference,\\  exclusion,\\  hue,\\  saturation,\\  color,luminosity|参考サイト:\\  %%https://developer.mozilla.org/  
 + ja/docs/Web/API/  CanvasRenderingContext2D/  globalCompositeOperation%%\\  当サイトに掲載していない値を入力すると無視される| 
 +|rotate|no|整数|画像の原点を軸に時計回りに回転0と360は同じとなる\\ ※fliplr,flipud指定で画像が反転している場合、反転による移動先の従来の原点を軸に回転します| 
 +|fliplr|no|true\\  false(初期値)|画像の左右反転\\ ※viewとの同時設定はできません。viewが設定されている時、fliplrは無視されます。| 
 +|flipud|no|true\\  false(初期値)|画像の上下反転\\ ※viewとの同時設定はできません。viewが設定されている時、flipudは無視されます。|
 |format|no|number\\  ,date\\  ,time\\  ,datetime|number:数字, date:日付, time:時刻, datetime:日付+時刻\\  ■画像は「0123456789,-/:」が等幅で横に並んだ状態のもの| |format|no|number\\  ,date\\  ,time\\  ,datetime|number:数字, date:日付, time:時刻, datetime:日付+時刻\\  ■画像は「0123456789,-/:」が等幅で横に並んだ状態のもの|
 |value|no|数字、プラスマイナス記号、カンマ、スラッシュ、コロン|numbe:「0123456788-/:+」+は空白として扱われる 例:1234,-9876,202/10/15+13:24:05\\  date:エポック秒 例:1611213665\\  time:同上\\  datetime:同上| |value|no|数字、プラスマイナス記号、カンマ、スラッシュ、コロン|numbe:「0123456788-/:+」+は空白として扱われる 例:1234,-9876,202/10/15+13:24:05\\  date:エポック秒 例:1611213665\\  time:同上\\  datetime:同上|
行 30: 行 34:
 |zerosup|no|true,false|true:ゼロ埋めする, false:ゼロ埋めするしない(初期値)\\  ※format=numberの時のみ意味を持つ| |zerosup|no|true,false|true:ゼロ埋めする, false:ゼロ埋めするしない(初期値)\\  ※format=numberの時のみ意味を持つ|
 |max|no|数字|表示する最大桁数。maxを指定すると右詰め。maxを指定しないと左詰め。\\  maxはカンマやマイナス記号も含んだ文字列全てが対象\\  例:\\  @image layer=num storage=numbers visible=true\\  format=number value=12345 max=5 comma=true\\  ↓\\  23,45\\  と表示される。\\  ※format=numberの時のみ意味を持つ| |max|no|数字|表示する最大桁数。maxを指定すると右詰め。maxを指定しないと左詰め。\\  maxはカンマやマイナス記号も含んだ文字列全てが対象\\  例:\\  @image layer=num storage=numbers visible=true\\  format=number value=12345 max=5 comma=true\\  ↓\\  23,45\\  と表示される。\\  ※format=numberの時のみ意味を持つ|
 +|shifth|no|整数|設定した値だけ水平(横)方向にずらして表示します\\ ※画像の中心位置がずれるわけではありません|
 +|shiftv|no|整数|設定した値だけ垂直(縦)方向にずらして表示します\\ ※画像の中心位置がずれるわけではありません|
  
 ■ top属性\\ ■ top属性\\
行 47: 行 53:
  
 ■ z=\\ ■ z=\\
-画像の基準点によって挙動が変わります[[座標系設定#Imageタグのz属性と座標について|※詳しくはこちら]]\\ +画像の基準点(原点)によって挙動が変わります[[座標系設定#Imageタグのz属性と座標について|※詳しくはこちら]]\\ 
-デフォルトでは基準点は画像の左上なのでそこを基準として画像が拡大されます\\+デフォルトでは基準点(原点)は画像の左上なのでそこを基準として画像が拡大されます\\
 画像の中央から拡大させたい場合orgx=c,orgy=cの記述が必要です\\ 画像の中央から拡大させたい場合orgx=c,orgy=cの記述が必要です\\
  
 {{anchor:数字を画像で出力:■ 数字を画像で出力}} {{anchor:数字を画像で出力:■ 数字を画像で出力}}
 |例:\\  @image layer=num storage=numbers visible=true orgx=l orgy=t left=400 top=300 format=number value=12345 max=7 zerosup=false comma=false z=100\\  →12345\\  @image layer=num storage=numbers visible=true orgx=l orgy=t left=400 top=300 format=number value=12345 max=7 zerosup=true comma=false z=100\\  →0012345\\  @image layer=num storage=numbers visible=true orgx=l orgy=t left=400 top=300 format=number value=12345 max=7 zerosup=false comma=true z=150\\  →12,345\\  @image layer=num storage=numbers visible=true orgx=c orgy=c left=400 top=300 format=number value=12345 max=7 zerosup=true comma=true z=50\\  →012,345\\  @image layer=num storage=numbers visible=true orgx=c orgy=c left=400 top=300 format=number value=123456789 max=7 zerosup=true comma=true z=50\\  →3456789\\  @image layer=num storage=numbers visible=true orgx=c orgy=c left=400 top=300 format=number value=-12345 max=7 zerosup=true comma=true z=200\\  →-12345\\  @image layer=num storage=numbers visible=true orgx=l orgy=t left=400 top=300 format=number value=2021/03/04 z=120\\  →2021/03/04\\  @image layer=num storage=numbers visible=true orgx=c orgy=c left=400 top=300 format=number value=2021/03/04+18:23:54 z=100\\  →2021/03/04 18:23:54\\  @image layer=num storage=numbers visible=true orgx=l orgy=t left=400 top=300 format=number value=20:19:54 z=200\\  →20:19:54\\  @image layer=num storage=numbers visible=true orgx=l orgy=t left=400 top=300 format=date value=&func.epochSecond z=120\\  →2021/03/04\\  @image layer=num storage=numbers visible=true orgx=c orgy=c left=400 top=300 format=datetime value=&func.epochSecond z=100\\  →2021/03/04 18:23:54\\  @image layer=num storage=numbers visible=true orgx=c orgy=c left=400 top=300 format=time value=1611213665 z=100\\  →20:19:54| |例:\\  @image layer=num storage=numbers visible=true orgx=l orgy=t left=400 top=300 format=number value=12345 max=7 zerosup=false comma=false z=100\\  →12345\\  @image layer=num storage=numbers visible=true orgx=l orgy=t left=400 top=300 format=number value=12345 max=7 zerosup=true comma=false z=100\\  →0012345\\  @image layer=num storage=numbers visible=true orgx=l orgy=t left=400 top=300 format=number value=12345 max=7 zerosup=false comma=true z=150\\  →12,345\\  @image layer=num storage=numbers visible=true orgx=c orgy=c left=400 top=300 format=number value=12345 max=7 zerosup=true comma=true z=50\\  →012,345\\  @image layer=num storage=numbers visible=true orgx=c orgy=c left=400 top=300 format=number value=123456789 max=7 zerosup=true comma=true z=50\\  →3456789\\  @image layer=num storage=numbers visible=true orgx=c orgy=c left=400 top=300 format=number value=-12345 max=7 zerosup=true comma=true z=200\\  →-12345\\  @image layer=num storage=numbers visible=true orgx=l orgy=t left=400 top=300 format=number value=2021/03/04 z=120\\  →2021/03/04\\  @image layer=num storage=numbers visible=true orgx=c orgy=c left=400 top=300 format=number value=2021/03/04+18:23:54 z=100\\  →2021/03/04 18:23:54\\  @image layer=num storage=numbers visible=true orgx=l orgy=t left=400 top=300 format=number value=20:19:54 z=200\\  →20:19:54\\  @image layer=num storage=numbers visible=true orgx=l orgy=t left=400 top=300 format=date value=&func.epochSecond z=120\\  →2021/03/04\\  @image layer=num storage=numbers visible=true orgx=c orgy=c left=400 top=300 format=datetime value=&func.epochSecond z=100\\  →2021/03/04 18:23:54\\  @image layer=num storage=numbers visible=true orgx=c orgy=c left=400 top=300 format=time value=1611213665 z=100\\  →20:19:54|
 +※画像(上記の例ではstorage=numbers)は0~9、カンマ、マイナス、スラッシュ、セミコロン、ドットの15文字が等間隔での横並びになります。\\
 +「0123456789,-/:.」
  
 ■ modeに以下の設定をした場合、TransとMoveの同時進行は不可となる(ブラウザ版)\\ ■ modeに以下の設定をした場合、TransとMoveの同時進行は不可となる(ブラウザ版)\\
 ['source-over','source-in','source-out','source-atop','destination-over','destination-in','destination-out','destination-atop'];\\ ['source-over','source-in','source-out','source-atop','destination-over','destination-in','destination-out','destination-atop'];\\
 +
  
 ===== layopt (レイヤ属性) ===== ===== layopt (レイヤ属性) =====
-下記以外は[[レイヤ操作#image (画像の読み込み)|imageタグ]]と同じ属性が利用できます(一部例外を除く)\\+[[レイヤ操作#image (画像の読み込み)|imageタグ]]と同じ属性に加えて下記属性が利用できます(一部例外を除く)\\ 
 +^属性^必須^デフォルト値^単位^説明^ 
 +|newgroup|no|group名|-|既存のレイヤに対して新しいgroupを設定する際に指定します。\\  [[使い方のヒント#group属性について|group属性についてはこちらを参照]]|
 <color #FF0000>storage は 無効(エラー)となります、指定しないでください</color>\\ <color #FF0000>storage は 無効(エラー)となります、指定しないでください</color>\\
  
行 66: 行 77:
 |group|no|group名|-|[[使い方のヒント#group属性について|group属性についてはこちらを参照]]| |group|no|group名|-|[[使い方のヒント#group属性について|group属性についてはこちらを参照]]|
 ※layerとgroupの両方が指定された場合、group指定は無視されます。 ※layerとgroupの両方が指定された場合、group指定は無視されます。
-===== forelay ((レイヤ情報のコピー 裏→表) =====+===== forelay (レイヤ情報のコピー 裏→表) =====
 属性は[[レイヤ操作#backlay (レイヤ情報のコピー 表→裏)|backlayタグ]]と同じ。 属性は[[レイヤ操作#backlay (レイヤ情報のコピー 表→裏)|backlayタグ]]と同じ。
 ===== copylay (レイヤ情報のコピー) ===== ===== copylay (レイヤ情報のコピー) =====
行 79: 行 90:
 ^属性^必須^デフォルト値^単位^説明^ ^属性^必須^デフォルト値^単位^説明^
 |layer|-|-|-|-| |layer|-|-|-|-|
-|page|-|fore(初期値)\\  back|-|-|+|page|-|fore(初期値)\\  back\\  both|-|-|
 |group|-|-|[[使い方のヒント#group属性について|group属性についてはこちらを参照]]| |group|-|-|[[使い方のヒント#group属性について|group属性についてはこちらを参照]]|
  
行 86: 行 97:
 ===== freeforeimages (全前景レイヤ画像の開放) ===== ===== freeforeimages (全前景レイヤ画像の開放) =====
 ^属性^必須^デフォルト値^単位^説明^ ^属性^必須^デフォルト値^単位^説明^
-|page|-|fore(初期値)\\  back|-|-|+|page|-|fore(初期値)\\  back\\  both|-|-|
  
 前景のレイヤをすべてfreeimageします。 前景のレイヤをすべてfreeimageします。
レイヤ操作.1638253055.txt.gz · 最終更新: 2021/11/30 15:17 by advmanager