JS中konva第三方绘制库的使用
2019-10-10 本文已影响0人
追逐_chase
web.jpeg
1. Konva特点
* 小巧、使用方便、适合移动端和pc端
* 支持丰富的事件处理操作
* 支持类似JQuery的操作方式
* 开源，可以随意更改
* 社区更新比较活跃，github托管源码
* 性能也不错
2. Konva的基本使用
- 舞台的概念的引入。整个视图看做是一个舞台
stage - 舞台中可以绘制很多个层
layer - layer下面可以有很多的
group - group下面可以有 矩形、图片、其他形状等
2.1 创建要绘制的容器
<body>
<div id="con"></div>
</body>
2.2 引入Konva库和使用
- 引用
<script src="JS/konva.js"></script>
- 使用
//创建一个 舞台
var stage = new Konva.Stage({
width:window.innerWidth,
height:window.innerHeight,
container:"con" //需要存放舞台的Dom容器
});
//第二步：创建层
var layer = new Konva.Layer(); //创建一个层
stage.add(layer); //把层添加到舞台
//3.创建组
//对象里面传入配置参数
//如果对象里面 设置了 x,y那么在绘制图层的时候
// 这个x,y就是坐标原点，绘制图形的参考点
var group = new Konva.Group({
});
// 把组添加到 绘制层
layer.add(group);
//创建要绘制的 图形
var rect = new Konva.Rect({ //创建一个矩形
x: 100, //矩形的x坐标，相对其父容器的坐标
y: 100,
width: 100, //矩形的宽度
height: 100, //矩形高度
fill: 'gold', //矩形填充的颜色
stroke: 'navy', //矩形描边的颜色
strokeWidth: 4, //填充宽度
opactity: .2, //矩形的透明度
scale: 1.2, //矩形的缩放 1：原来大小
rotation: 30, //旋转的角度，是deg不是弧度。
cornerRadius: 10, //圆角的大小（像素）
id: 'rect1', //id属性，类似dom的id属性
name: 'rect',
draggable: true //是否可以进行拖拽
});
//添加到组中
group.add( rect ); //把矩形添加到组中
//绘制
layer.draw(); //绘制层到舞台上
- 例子
<script type="text/javascript">
//创建一个 舞台
var stage = new Konva.Stage({
width:window.innerWidth,
height:window.innerHeight,
container:"con"
});
//2.创建绘制层
var layer = new Konva.Layer();
//把配置层添加到 舞台上
stage.add(layer);
//3.创建组
//对象里面传入配置参数
//如果对象里面 设置了 x,y那么在绘制图层的时候
// 这个x,y就是坐标原点，绘制图形的参考点
var group = new Konva.Group({
});
// 把组添加到 绘制层
layer.add(group);
//4.绘制一个矩形
//原生的canvas在平移，缩放的时候都会对x,y有影响，但是Konva 没有
var rect = new Konva.Rect({
x:200,
y:200,
height:100,
width:200,
//填充颜色
fill:"red",
//描边颜色
stroke:"blue",
strokeWidth:10,
//是否可以推动
draggable:true,
scaleX:2,
scaleY:2,
dash:[1,1]
//是否可见
// visible:false
});
//添加到组里面
group.add(rect);
var circle = new Konva.Circle({
x:100,
y:100,
radius: 40,
fill: 'red',
stroke: 'black',
strokeWidth: 5
});
group.add(circle);
// 创建五角星
var star = new Konva.Star({
x: 200,
y: 400,
numPoints: 5,
//内圆的半径
innerRadius: 30,
//外圆的半径
outerRadius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable : true
});
group.add(star);
//5.绘制到图层
layer.draw();
</script>
image.png
- 进度条的绘制
<script type="text/javascript">
//1.创建舞台
var stage = new Konva.Stage({
width:window.innerWidth,
height:window.innerHeight,
container:"con"
});
//2.创建绘制层
var layer = new Konva.Layer();
stage.add(layer);
//3.创建矩形
var progress = new ProgressBar({
x:1/8 * stage.width(),
y:1/2 * stage.height(),
width: 3/4 * stage.width(),
height:1/15 * stage.height(),
strokeColor:"#ccc",
fillColor:"red",
strokeWidth:1,
value:0.1,
cornerRadius:5.0
});
//绘制
progress.render(layer);
layer.draw();
progress.update(function () {
console.log("1111");
});
</script>
- 自定义构造函数类
ProgressBar
function ProgressBar(option) {
this._init(option)
};
ProgressBar.prototype = {
constructor:ProgressBar,
_init:function (option) {
option = option||{};
//坐标点
this.x = option.x || 0;
this.y = option.y || 0;
this.width = option.width||0;
this.height = option.height ||0;
//颜色
this.fillColor = option.fillColor || "black";
this.strokeColor = option.strokeColor||"black";
this.strokeWidth = option.strokeWidth || 1;
//进度值
this.value = option.value || 0.1;
//圆角
this.cornerRadius = option.cornerRadius;
},
//绘制
render:function (layer) {
this.group = new Konva.Group();
layer.add(this.group);
//绘制内部矩形
var innerRect = new Konva.Rect({
x:this.x,
y:this.y,
//宽度按比例
width:this.width * this.value,
height:this.height,
fill:this.fillColor,
id:"innerRect"
});
this.group.add(innerRect);
//绘制外部矩形
var outRect = new Konva.Rect({
x:this.x,
y:this.y,
width:this.width,
height:this.height,
stroke:this.strokeColor,
strokeWidth:this.strokeWidth,
//圆角属性
cornerRadius:this.cornerRadius
});
this.group.add(outRect);
},
update:function (fn) {
//获取到内部矩形
var recct = this.group.findOne("#innerRect");
//更改this
var that = this;
that.fn = fn;
//内部矩形做动画
recct.to({
width:this.width,
duration:3,
onFinish:function () {
//更改thisde的指向
if (typeof that.fn == "function"){
that.fn();
}
}
});
}
};
Untitled.gif
