如何使用Pixi進行svg縮放

Question

我一直在嘗試使用PIXI進行SVG縮放，但結果並不是我期望的那樣。正如你在圖像中看到的那樣，debian標誌是一個SVG文件，似乎是模糊不清的。我寫我的代碼錯誤：

精製而成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) 

• chosenImage是利用import * as choesnImage from 'the-file-path'
• selectedScale檢索SVG文件是可以動態改變得益於VueJS選擇縮放值
• 您可以查看我的作品here及其對應的GitHub repo
• 兔子標誌是爲了驗證縮放發生的時間，它只適用於SVG而不是整個畫布。

Answer 1

根據this issue你需要加載SVG這樣以生成縮放SVG質感。

PIXI.Texture.fromImage(this.chosenImage, undefined, undefined, newVal) 

並且需要清理紋理緩存，然後爲每個新的比例更改創建新紋理。

PIXI.utils.clearTextureCache() 

改性SvgCompare.vue上gist