PixiJSのバージョンは4.8.4です。 指定のフォントで描画したいだけなのにすごく困った。 最初に結論 PIXI.TextMetrics.BASELINE_SYMBOLに適当な全角文字を追加してやればOK。 PIXI.TextMetrics.BASELINE_SYMBOL += "あ｜"; 詳細 以下は Mplus 1m regularで描画したとき。 const width = 500; const height = 200; const renderer = PIXI.autoDetectRenderer(width, height, { backgroundColor: 0x000000 }); document.querySelector("body").appendChild(renderer.view); var container = new PIXI.Container
PixiJS で以下のようにすると PIXI.Graphics を使ってマスクすることができますが、このままではアルファ値が考慮されず使い勝手が悪かったので、やり方を調べてみました。 const sprite = new PIXI.Sprite(texture); // マスク作成 const mask = new PIXI.Graphics(); sprite.mask = mask; // マスク描画 // メモ: ここでアルファ値や色を指定しても適用されない mask.beginFill(); mask.drawRect(50, 50, 100, 100); mask.endFill(); 1. 答え 答えから言うと、PIXI.Graphics ではアルファ値を考慮しない仕様になっているので、代わりに PIXI.Sprite を使います。ただし、ここでは画像を読み込んでマスクをしたい
今回作るもの（完成版） 今回作るスライダーの完成版です。 スライダーの構造は至って普通のスライダーと変わりはありません。 その上にPixi FilterのDisplacementフィルターをかけて少し画像がグニっとした見た目になるようにしています。また、クリックした時に波紋が広がるような表現になるように、クリックイベント時にShockwaveフィルターをかけています。 完成版ソースは以下 https://github.com/horizun-horizon/pixi-slider/blob/master/index.html 0. ライブラリ・プラグインの読み込み まずは以下の3つのライブラリ・プラグインを読み込みます。 ※それぞれの説明はコメントの通りです。 <!-- Pixi.js本体 --> <script src="//cdnjs.cloudflare.com/ajax/libs/
Browse to a module or class using the sidebar to view its API documentation. Keyboard Shortcuts Press s to focus the API search box. Use Up and Down to select classes, modules, and search results. With the API search box or sidebar focused, use ⌘-Left or ⌘-Right to switch sidebar tabs. With the API search box or sidebar focused, use Ctrl+Left and Ctrl+Right to switch sidebar tabs.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く