You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.2 KiB
107 lines
2.2 KiB
<template>
|
|
<view>
|
|
<canvas id="canvas" type="2d" :style="'width: ' + width + 'px; height: ' + height + 'px;'"></canvas>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const xmlParse = require("./xml-parser");
|
|
const {
|
|
Widget
|
|
} = require("./widget");
|
|
const {
|
|
Draw
|
|
} = require("./draw");
|
|
|
|
export default {
|
|
data() {
|
|
return {};
|
|
},
|
|
components: {},
|
|
props: {
|
|
width: {
|
|
type: Number,
|
|
default: 400
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 300
|
|
}
|
|
},
|
|
beforeMount() {
|
|
const dpr = wx.getSystemInfoSync().pixelRatio;
|
|
const query = this.createSelectorQuery();
|
|
this.dpr = dpr;
|
|
query.select('#canvas').fields({
|
|
node: true,
|
|
size: true
|
|
}).exec(res => {
|
|
console.log(res, "==res");
|
|
const canvas = res[0].node;
|
|
const ctx = canvas.getContext('2d');
|
|
canvas.width = res[0].width * dpr;
|
|
canvas.height = res[0].height * dpr;
|
|
ctx.scale(dpr, dpr);
|
|
this.ctx = ctx;
|
|
this.canvas = canvas;
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
async renderToCanvas(args) {
|
|
const {
|
|
wxml,
|
|
style
|
|
} = args; // 清空画布
|
|
|
|
const ctx = this.ctx;
|
|
const canvas = this.canvas;
|
|
|
|
if (!ctx || !canvas) {
|
|
return Promise.reject(new Error('renderToCanvas: fail canvas has not been created'));
|
|
}
|
|
|
|
ctx.clearRect(0, 0, this.width, this.height);
|
|
const {
|
|
root: xom
|
|
} = xmlParse(wxml);
|
|
const widget = new Widget(xom, style);
|
|
const container = widget.init();
|
|
this.boundary = {
|
|
top: container.layoutBox.top,
|
|
left: container.layoutBox.left,
|
|
width: container.computedStyle.width,
|
|
height: container.computedStyle.height
|
|
};
|
|
const draw = new Draw(canvas, ctx);
|
|
await draw.drawNode(container);
|
|
return Promise.resolve(container);
|
|
},
|
|
|
|
canvasToTempFilePath(args = {}) {
|
|
return new Promise((resolve, reject) => {
|
|
const {
|
|
top,
|
|
left,
|
|
width,
|
|
height
|
|
} = this.boundary;
|
|
wx.canvasToTempFilePath({
|
|
x: left,
|
|
y: top,
|
|
width,
|
|
height,
|
|
destWidth: width * this.dpr,
|
|
destHeight: height * this.dpr,
|
|
canvas: this.canvas,
|
|
fileType: args.fileType || 'png',
|
|
quality: args.quality || 1,
|
|
success: resolve,
|
|
fail: reject
|
|
});
|
|
});
|
|
}
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|