插件名称 | vue-canvas |
---|---|
发布时间 | 2020年12月25日 |
插件作者 | hitokun-s |
使用vue.js的通用框架,可为画布绘制启用声明性标记。
$ npm install vue-canvas --save
HTML:
<canvas id="canvas" v-canvas:cb="onRendered" width="600" height="400">
<v-bg path="img/world.svg" ord="1"></v-bg><!-- sample component -->
<v-text ord="2" x="300" y="200" :message="message"></v-text><!-- sample component -->
</canvas>
Javascript(用于main):
var vc = new Vue({
el: '#canvas',
data: {
message: "Hello!"
},
methods: {
onRendered: function (ctx) {
ctx.textAlign = "start";
ctx.fillStyle = "red";
ctx.fillText("rendering done!", 10, 30);
}
}
});
// 让我们更新vue实例数据
setTimeout(function () {
vc.message = "Good-bye!"; // => re-draw canvas automatically!
}, 2000);
Javascript(用于示例组件):
// 用于绘制画布背景图像的示例组件
Vue.component('v-bg', Vue.extend({
props: ["ord", "path"],
methods: {
draw: function (ctx, done) {
var img = new Image();
img.src = this.path;
img.onload = function(){
ctx.drawImage(img, 0, 0);
done();
}
}
}
}));
// 使用提供的坐标绘制消息的示例组件
Vue.component('v-text', Vue.extend({
props: ["ord", "message", "x", "y"],
methods: {
draw: function (ctx, done) {
var canvas = ctx.canvas;
ctx.textAlign = "center";
ctx.fillStyle = "black";
ctx.font = "bold 30pt Courier";
ctx.fillText(this.message, parseInt(this.x), parseInt(this.y));
done();
}
}
}));