なにかお手伝いできることがあればご連絡ください。
お問い合わせはこちらから
※Googleフォームが表示されます
ステージを用意する。
<template>
<div class="stage"></div>
</template>
<script lang="ts">
import {Options, Vue} from 'vue-class-component';
// PixiJSを読み込み
import * as PIXI from 'pixi.js';
export default class MyComponent extends Vue {
app!: PIXI.Application
mounted() {
// ステージを作成
this.app = new PIXI.Application({
backgroundColor: 0xffffff,
antialias: true, // アンチエイリアスを有効にする
resolution: window.devicePixelRatio || 1, // 解像度に合わせた拡大率を指定する
autoDensity : true, // CSSで見た目のサイズの戻してくれる,
resizeTo: window // windowのリサイズに合わせてstage(canvas)をリサイズする
});
// rootのdom内(<div class="stage" />)にappendする
this.$el.appendChild(this.app.view);
}
}
</script>
以下のような感じでステージに、オブジェクトを追加することができます。
const obj = new PIXI.Graphics();
obj.beginFill(0xff0000);
obj.drawRect(0, 0, 200, 100);
this.app.stage.addChild(obj);
グラデーション用のメソッドなどは無いようで、グラデーションで描画したcanvasをSpriteに入れてグラデーションを描くようです。
mounted() {
this.app = new PIXI.Application({
backgroundColor: 0xffffff,
antialias: true,
resolution: window.devicePixelRatio || 1, // 解像度に合わせた拡大率を指定する
autoDensity: true, // CSSで見た目のサイズの戻してくれる,
resizeTo: window
});
this.$el.appendChild(this.app.view);
// グラデーションを描画
const gradient = this.createGradient(window.innerWidth, window.innerHeight, '#acb6e5', '#86fde8');
this.app.stage.addChild(gradient);
this.app.renderer.resize(window.innerWidth, window.innerHeight);
}
// グラデーションのSpriteを生成
createGradient(width: number, height: number, colorFrom: string, colorTo: string): PIXI.Sprite {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
if (ctx) {
const gradient = ctx.createLinearGradient(0, 0, width, 0)
canvas.setAttribute('width', String(width))
canvas.setAttribute('height', String(height))
gradient.addColorStop(0, colorFrom)
gradient.addColorStop(1, colorTo)
ctx.fillStyle = gradient
ctx.fillRect(0, 0, width, height)
}
return PIXI.Sprite.from(canvas)
}
なにかお手伝いできることがあればご連絡ください。
※Googleフォームが表示されます