2
我一直在尝试使用PIXI进行SVG缩放,但结果并不是我期望的那样。正如你在图像中看到的那样,debian标志是一个SVG文件,似乎是模糊不清的。我写我的代码错误:如何使用Pixi进行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而不是整个画布。