Pixiでsvgスケーリングを行う方法

Question

私はPIXIでSVGスケーリングをしようとしてきましたが、結果は本当に私が期待したものではありません。イメージでわかるように、SVGファイルであるdebianのロゴはぼやけてぎこちないようです。私は私のコードを間違って書いています：https://github.com/kevguy/D3-Svg-Comparison/blob/master/src/components/SvgCompare.vueから精製

：

// initialization 
this.renderer = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb}) 
document.getElementById('svg-canvas').appendChild(this.renderer.view) 
this.container = new PIXI.Container() 
this.stage = this.renderer.stage 
this.stage.addChild(this.container) 

// appending the svg file 
const texture = PIXI.Texture.fromImage(this.chosenImage) 
this.svg = new PIXI.Sprite(texture) 
this.svg.anchor.x = 0.8 
this.svg.anchor.y = 0.8 
this.svg.position.x = 400 
this.svg.position.y = 300 
this.svg.scale.x = this.selectedScale 
this.svg.scale.y = this.selectedScale 

this.container.addChild(this.svg) 

• chosenImageimport * as choesnImage from 'the-file-path'
• selectedScaleを使用して取得SVGファイルを動的にVueJSのおかげで変更することができ、選択したスケーリング値であります
• 私の仕事をチェックアウトすることができますhereと対応するGitHub repo
• バニーロゴはスケーリングが起きたときを確認するためのもので、キャンバス全体ではなくSVGにのみ適用されます。

Answer 1

はthis issueによると、あなたは、スケーリングされたSVGのテクスチャを生成するには、このようにSVGをロードする必要があります。

テクスチャキャッシュを消去し、新しいスケール変更ごとに新しいテクスチャを作成する必要があります。 gist

に SvgCompare.vueを修正

PIXI.utils.clearTextureCache()