由于kineticjs作者大约有6年没有更新了，所以文档也很少，接下来我们就来操作一波
kineticjs可以说是对canvas进行的一次封装，具体没看，个人理解，直接调用方法就好了
拿到框架直接引入就是干
既然是绘制类的js库，那肯定要从简单的入手，绘制形状，线条，图片等等，先易后难，你们说对吧
kineticjs是需要你先new一个Kinetic对象的，然后创建舞台stage，接着就是往舞台上添加图层layer，图层上可以绘制text icon img line,对了，还有一个点需要注意一下：只有舞台可以添加多个layer，这个layer是不能嵌套的，但是kineticjs也提供了一个group的方法，让你将多个layer分成一个组放在一起
话不多说，线上代码，由于我是在vue+ts项目下编写的，所以下面的代码可能需要vue的基础，不过现在大多数的公司前端都会vue，应该不是难事
我是直接在public/index.html中引入的kineticjs文件
<script type="text/javascript" src="js/kinetic-v5.1.0.min.js"></script>
先放出目录结构
主要是在app.vue和publicMap.ts这个两个文件中编写的
app.vue
<template> <div id="app"> <div id="container"></div> <div class="rg"> <div>编辑标签</div> <div class="item"> <el-row :gutter="20"> <el-col :span="18"> <div class="grid-content bg-purple"> <el-input v-model="form.name" @change="changeName"></el-input> </div> </el-col> <el-col :span="6"> <div class="grid-content bg-purple"> <el-color-picker v-model="form.nameColor"></el-color-picker> </div> </el-col> </el-row> </div> <div class="item"> <el-row :gutter="20"> <el-col :span="18"> <div class="grid-content bg-purple"> <el-input v-model="form.price"></el-input> </div> </el-col> <el-col :span="6"> <div class="grid-content bg-purple"> <el-color-picker v-model="form.priceColor"></el-color-picker> </div> </el-col> </el-row> </div> <div class="item"> <el-row :gutter="20"> <el-col :span="8"> <div class="grid-content bg-purple">背景</div> </el-col> <el-col :span="8"> <div class="grid-content bg-purple"> <el-color-picker v-model="form.nameBg"></el-color-picker> </div> </el-col> <el-col :span="8"> <div class="grid-content bg-purple"> <el-color-picker v-model="form.priceBg"></el-color-picker> </div> </el-col> </el-row> </div> <div class="item"> <el-row :gutter="20"> <el-col :span="18"> <div class="grid-content bg-purple"> <el-input v-model="form.type"></el-input> </div> </el-col> <el-col :span="6"> <div class="grid-content bg-purple"> <el-color-picker v-model="form.typeColor"></el-color-picker> </div> </el-col> </el-row> </div> <div class="item"> <el-row :gutter="20"> <el-col :span="18"> <div class="grid-content bg-purple"> <el-input v-model="form.dt"></el-input> </div> </el-col> <el-col :span="6"> <div class="grid-content bg-purple"> <el-color-picker v-model="form.dtColor"></el-color-picker> </div> </el-col> </el-row> </div> <div class="item"> <el-row :gutter="20"> <el-col :span="16"> <div class="grid-content bg-purple">背景</div> </el-col> <el-col :span="8"> <div class="grid-content bg-purple"> <el-color-picker v-model="form.typeBg" @change="changeTypeBg"></el-color-picker> </div> </el-col> </el-row> </div> </div> </div> </template> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; import { PublicMap } from "./utils/publicMap"; @Component export default class App extends Vue { scene: any; form = { name: "现价", price: "￥99.0000", nameColor: "#080808", priceColor: "#ffffff", nameBg: "#F4E803", priceBg: "#F40303", type: "HOT IN SUMMER", dt: "夏季热卖", typeColor: "#ffffff", dtColor: "#ffffff", typeBg: "#0733F5" }; mounted() { console.log(window); this.getInit(); } getInit() { this.scene = new PublicMap("container"); this.scene.init(); } } </script> <style lang="less"> * { margin: 0; padding: 0; } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; justify-content: space-between; .item { margin: 20px; display: flex; align-items: center; } } </style>
这个文件中需要说一下，template中
<div id="container"></div>主要是这个，这个是舞台的容器
publicMap是我封装的一个对象而已，里面的init方法是初始化创建舞台的方法
publicMap.ts
class PublicMap {
rootId: string;
stage: any;
group1: any;
group2: any;
constructor(id: any) {
// 创建时传进来的容器id
this.rootId = id;
}
//初始化舞台
init() {
this.stage = new (window as any).Kinetic.Stage({
container: this.rootId,
width: 400,
height: 400
});
this.drawImg()
}
//绘制图片
drawImg() {
const layer = new (window as any).Kinetic.Layer();
const imageObj = new Image();
imageObj.onload = () => {
const yoda = new (window as any).Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 400,
height: 400,
});
layer.add(yoda);
this.stage.add(layer);
this.drawRect()
this.drawRect2()
};
imageObj.src = "./test.png";
}
// 绘制第一个group
drawRect() {
const group = new (window as any).Kinetic.Group({
draggable: true, // 允许拖拽需要配置为true
});
const layer = new (window as any).Kinetic.Layer();
const rect = new (window as any).Kinetic.Rect({
width: 100,
height: 50,
fill: ‘#F4E803‘
});
const textpath = new (window as any).Kinetic.Text({
id: ‘id2‘,
x: 26,
y: 13,
fill: ‘#080808‘,
fontSize: ‘24‘,
fontFamily: ‘Arial‘,
text: ‘现价‘
});
const rect1 = new (window as any).Kinetic.Rect({
x: 100,
y: 0,
width: 200,
height: 50,
fill: ‘#F40303‘
});
const textpath1 = new (window as any).Kinetic.Text({
x: 120,
y: 13,
fill: ‘#ffffff‘,
fontSize: ‘24‘,
fontFamily: ‘Arial‘,
text: ‘￥99.0000‘
});
group.add(rect)
group.add(textpath)
group.add(rect1)
group.add(textpath1)
layer.add(group)
this.group1 = group
this.stage.add(layer);
}
// 绘制第二个group
drawRect2() {
const group = new (window as any).Kinetic.Group({
draggable: true,// 允许拖拽需要配置为true
});
const layer = new (window as any).Kinetic.Layer();
const rect = new (window as any).Kinetic.Rect({
id:‘id1‘,
x:50,
y:200,
width: 300,
height: 100,
fill: ‘#0733F5‘
});
console.log(rect)
const textpath = new (window as any).Kinetic.Text({
x: 110,
y: 220,
fill: ‘#ffffff‘,
fontSize: ‘24‘,
fontFamily: ‘Arial‘,
text: ‘HOT IN SUMMER‘
});
const line = new (window as any).Kinetic.Line({
x: 0,
y: 0,
points: [120, 250, 280, 250],
stroke: ‘#ffffff‘,
});
const textpath1 = new (window as any).Kinetic.Text({
x: 150,
y: 260,
fill: ‘#ffffff‘,
fontSize: ‘24‘,
fontFamily: ‘Arial‘,
text: ‘夏季热卖‘
});
group.add(rect)
group.add(textpath)
group.add(line)
group.add(textpath1)
layer.add(group)
this.group2 = group
this.stage.add(layer);
}
// 绘制文本
drawText() {
const layer = new (window as any).Kinetic.Layer();
const textpath = new (window as any).Kinetic.TextPath({
x: 100,
y: 50,
fill: ‘#333‘,
fontSize: ‘24‘,
fontFamily: ‘Arial‘,
text: ‘All the world\‘s a stage, and all the men and women merely players.‘,
data: ‘M10,10 C0,0 10,150 100,100 S300,150 400,50‘
});
layer.add(textpath);
this.stage.add(layer);
}
}
export { PublicMap }
上面就包含了绘制文本，绘制图片，绘制形状，绘制线条等方法
界面如下:
静态绘制了之后，可能有需求需要动态的修改文字颜色等信息
图片右边的表单用的elementui的，可以自行处理
接下来说两个点，一个动态修改背景，一个动态修改文本，其实两个都差不多的
不知道大家有没有注意到我上面在绘制rect/Text的时候添加了id的
这个id要是唯一的，因为修改的时候你需要获取这个对象
修改背景颜色，就添加一个@change事件，然后再change事件中获取对象，修改对象，重新绘制
changeTypeBg() {
this.scene.stage.get("#id1")[0].clearCache();
this.scene.stage.get("#id1")[0].setFill(this.form.typeBg);
this.scene.stage.draw();
}
修改之后调用stage的draw方法，非常重要，不调用的话，你打印出来会看到确实颜色改了，但是界面不会渲染，这点需要注意哦
修改文字
changeName() {
this.scene.stage.get("#id2")[0].clearCache();
this.scene.stage.get("#id2")[0].setText(this.form.name);
this.scene.stage.draw();
}
好了，看一下修改之后的效果