如何用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'
检索的svg文件
• selectedScale是选定的缩放值，可以通过VueJS
动态更改
• 您可以查看我的作品here及其相应的GitHub repo
• 兔子徽标用于验证缩放何时发生，它仅适用于SVG，而不适用于整个画布。

Answer 1

根据this issue，您需要像这样加载svg以生成缩放的svg纹理。

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

需要清理纹理缓存，然后为每次新的比例更改创建新纹理。

PIXI.utils.clearTextureCache()

在gist

上修改了SvgCompare.vue