PAG官网:官网
https://pag.art/docs/sdk.html#web-%E7%AB%AF%E6%8E%A5%E5%85%A5
一、创建依赖准备
libpag.min.js
libpag.wasm
去git上下载就行了
https://github.com/Tencent/libpag/releases/tag/v4.3.3
下载 libpag_4.3.3_web.zip 里边有
两个文件放到 public 中
pag的文件也是放到public中
二、index.html引入
只引入这一个就行
<script src="libpag.min.js"></script>
三、main.js
window.libpag.PAGInit().then( res =>{
Vue.prototype.$PAG = res
new Vue({
el: '#app',
render: h => h(App),
router,
store
});
})
四、新建组件组件
import CanvasPag from '@/components/CanvasPag/index.vue'
Vue.component('canvas-pag',CanvasPag)
<script>
export default {
name: "CanvasPag",
props: {
canvasId: String,
url: String,
scaleWidth: {
type: Number,
default: 0.58
},
scaleHeight: {
type: Number,
default: 0.58
},
playNum: {
type: Number,
default: 0
},
},
data() {
return {
renderingId: undefined,
pagView: undefined,
pagFile:undefined,
pagComposition:undefined,
}
},
created() {
this.renderingId = this.canvasId || this.randomId()
},
mounted() {
this.createdPag()
},
methods: {
randomId(lenNum, radixNum) {
let len = lenNum || 32, radix = radixNum || 16
let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
let uuid = []
let i
radix = radix || chars.length
if (len) {
for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]
} else {
var r
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
uuid[14] = '4'
for (i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | Math.random() * 16
uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]
}
}
}
return uuid.join('')
},
async createdPag() {
const PAG = this.$PAG
let url = "/pag/" + this.url + ".pag"
const buffer = await fetch(url).then((response) => {
return response.arrayBuffer()
})
const pagFile = await PAG.PAGFile.load(buffer)
// 设置宽高
const pagComposition = PAG.PAGComposition.make(pagFile.width(), pagFile.height());
// 宽高的缩放比例
//const matrix1 = PAG.Matrix.makeScale(this.scaleWidth, this.scaleHeight);
// 修改比例
//pagFile.setMatrix(matrix1);
pagComposition.addLayer(pagFile);
const canvas = document.getElementById( this.renderingId );
if (canvas !== null) {
canvas.width = pagComposition.width();
canvas.height = pagComposition.height();
// 取消首帧渲染 https://pag.art/docs/web-play-pagfile.html
const pagView = await PAG.PAGView.init(pagComposition, canvas, {firstFrame: false} );
// Set PAGView play infinity.
pagView.setRepeatCount(this.playNum);
await pagView.play();
this.pagView = pagView
this.pagFile = pagFile
this.pagComposition = pagComposition
}
},
async destroy() {
/*const pagDom = document.querySelectorAll('.pag-zk');
if (pagDom) {
console.log('webgl清空内容')
await pagDom.forEach((item) => {
const gl = item.getContext("webgl");
gl.clear(gl.COLOR_BUFFER_BIT);
})
}*/
// 销毁图片
this.pagFile?.destroy();
// 判断是否存在值
if( this.pagComposition ){
// 清空加载的图片
this.pagComposition.removeAllLayers()
// 销毁
this.pagComposition.destroy();
}
if (this.pagView?.pagSurface) {
await this.pagView.pagSurface.clearAll();
}
await this.pagView?.destroy();
}
},
beforeDestroy() {
this.destroy()
}
}
</script>
五、页面使用
<canvas-pag
key="jkzt-blue"
url="yxzz"
style="position: absolute;top: -22px;"
></canvas-pag>