Canvas开发库封装

Posted 不完美的小孩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Canvas开发库封装相关的知识,希望对你有一定的参考价值。

一、Canvas第三方类库

1、常见的第三方类库

  • konva.js

      <style>
      		body{
      			margin:0;
      		}
      	</style>
      </head>
      <body>
      	<div id="box"></div>
      	<script src="../konva/konva.min.js"></script>
      	<script>
      		//创建舞台
      		var stage=new Konva.Stage({
      			container:"#box",
      			width:window.innerWidth,
      			height:window.innerHeight
      		});
      		//创建层
      		var layer=new Konva.Layer({
      
      		});
      		stage.add(layer);
      		//创建图形
      		var star=new Konva.Star({
      			x:stage.getWidth()/2,
      			y:stage.getHeight()/2,
      			innerRadius:80,
      			outerRadius:200,
      			fill:"Red"
      		});
      		layer.add(star);
      		//绘制层
      		layer.draw();
      	</script>
    
  • chart.js 图表插件

  • eccharts 图表插件(百度)

  • tree.js(3d webgl 库)

二、第三方类库Konva

1、Konva的结构

  • 舞台(stage)-->层(layer)-->图形

  • Statge -->Layer -->分组(-->分组-->)-->图形

      			  Stage
                      |
               +------+------+
               |             |
             Layer         Layer
               |             |
         +-----+-----+     Shape
         |           |
       Group       Group
         |           |
         +       +---+---+
         |       |       |
      Shape   Group    Shape
                 |
                 +
                 |
               Shape
    

2、Konva绘制图形

  • Konva.Rect

      <script>
      		//创建舞台
      		var stage=new Konva.Stage({
      			container:"#box",
      			width:window.innerWidth,
      			height:window.innerHeight
      		});
      		//创建层
      		var layer=new Konva.Layer({
      			x:100,
      			y:100
      		});
      		stage.add(layer);
      		//创建一个组
      		var group=new Konva.Group({
      			x:100,
      			y:100
      		});
      		layer.add(group);
      		//创建矩形
      		var rect=new Konva.Rect({
      			x:0,
      			y:0,
      			width:100,
      			height:100,
      			stroke:"red"
      		});
      		group.add(rect);
      		layer.draw();
      </script>
    
  • Konva.Circle

      //绘制圆形
      var circle=new Konva.Circle({
      	x:stage.getWidth()/2,
      	y:stage.getHeight()/2,
      	radius:100,
      	stroke:"red",
      	fill:"green"
      });
      layer.add(circle);
    
  • Konva.Wedge

      //绘制扇形
      var wedge=new Konva.Wedge({
      	x:200,
      	y:400,
      	radius:100,
      	fill:"yellow",
      	stroke:"orange",
      	angle:90,
      	rotation:-10
      });
      layer.add(wedge);
    
  • Konva.Line

      //绘制线条
      var line1=new Konva.Line({
      	points:[700,100,900,200,800,400],
      	stroke:"skyblue",
      	strokeWidth:4,
      	lineCap:"round",
      	lineJoin:"round",
      	closed:true,
      	tension:true//曲线
      });
      layer.add(line1);
    
  • Konva.Star

  • Konva.Image

3、事件

点击正方形改变圆角最后变成圆

	<div id="box"></div>
	<script src="../konva/konva.min.js"></script>
	<script>
		//创建舞台
		var stage=new Konva.Stage({
			container:"#box",
			width:window.innerWidth,
			height:window.innerHeight
		});
		var layer=new Konva.Layer({

		});
		stage.add(layer);

		var rect=new Konva.Rect({
			x:stage.getWidth()/2,
			y:stage.getHeight()/2,
			width:200,
			height:200,
			stroke:"#000",
			strokeWidth:5,
			fill:"yellow",
			offset:{
				x:100,
				y:100
			}
		});
		layer.add(rect);
		layer.draw();

		rect.on("click",function(ev){
			rect.cornerRadius(rect.cornerRadius()+5);
			rect.scale({
				x:1.5,
				y:1.5
			})
			layer.draw();

		})
		
	</script>

4、绘制

创建一个矩形: Konva.Rect(option);

	//Konva使用的基本案例
    //第一步:创建舞台
    var stage = new Konva.Stage({
        container: \'container\',     //需要存放舞台的Dom容器
        width: window.innerWidth,   //设置全屏
        height: window.innerHeight
    });

    //第二步:创建层
    var layer = new Konva.Layer();  //创建一个层
    stage.add(layer);               //把层添加到舞台

    //第三步: 创建矩形
    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             //是否可以进行拖拽
    });

    //创建一个组
    var group = new Konva.Group({
        x: 40,      
        y: 40,
    });
    group.add( rect );  //把矩形添加到组中

    //第四步: 把形状放到层中
    layer.add( group ); //把组添加到层中
   	layer.draw();       //绘制层到舞台上

5、动画

01、Konva.Tween

	<div id="box"></div>
	<script src="../konva/konva.min.js"></script>
	<script>
		//创建舞台
		var stage=new Konva.Stage({
			container:"#box",
			width:window.innerWidth,
			height:window.innerHeight
		});

		var layer=new Konva.Layer({

		});
		stage.add(layer);

		//绘制五星
		var star=new Konva.Star({
			x:stage.getWidth()/2,
			y:stage.getHeight()/2,
			innerRadius:100,
			outerRadius:200,
			fill:"orange",
			stroke:"red",
			strokeWidth:6,
			numPoints:6
		});
		layer.add(star);
		layer.draw();

		var tween=new Konva.Tween({
			node:star,
			duration:2,
			rotation:360,
			easing:Konva.Easings.Linear,
			// yoyo:true
			onFinish:function(){
				tween.reset();
				tween.play();
			}
		});
		tween.play();
		star.on("mouseenter",function(){
			tween.pause();
		}).on("mouseleave",function(){
			tween.play();
		})
	</script>
  • 1、tween的控制方法
  • tween.play(), //播放动画
  • tween.pause(), //暂停动画
  • tween.reverse(), //动画逆播放
  • tween.reset(), //重置动画
  • tween.finish(), //立即结束动画
  • seek:英文:寻找 英 [siːk] 美 [sik]
  • 2、tween的缓动控制选项
  • Konva.Easings.Linear //线性
  • Konva.Easings.EaseIn //缓动,先慢后快
  • Konva.Easings.EaseOut //先快后慢
  • Konva.Easings.EaseInOut //两头慢,中间快
  • Konva.Easings.BackEaseIn //往回来一点,然后往前冲,汽车启动类似...
  • Konva.Easings.BackEaseOut
  • Konva.Easings.BackEaseInOut
  • Konva.Easings.ElasticEaseIn //橡皮筋 英 [ɪ\'læstɪk] 美 [ɪ\'læstɪk]
  • Konva.Easings.ElasticEaseOut
  • Konva.Easings.ElasticEaseInOut
  • Konva.Easings.BounceEaseIn //弹跳;弹起,反跳;弹回 英 [baʊns] 美 [baʊns]
  • Konva.Easings.BounceEaseOut
  • Konva.Easings.BounceEaseInOut
  • Konva.Easings.StrongEaseIn //强力
  • Konva.Easings.StrongEaseOut
  • Konva.Easings.StrongEaseInOut

02、Konva.to

  • to就是对tween的封装,比较简单好用

      heart.to({
      	scaleX:.5,
      	scaleY:.5,
      	duration:2,
      	yoyo:true
      });

以上是关于Canvas开发库封装的主要内容,如果未能解决你的问题,请参考以下文章

常用Javascript代码片段集锦

sign-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端;

VSCode自定义代码片段14——Vue的axios网络请求封装

VSCode自定义代码片段14——Vue的axios网络请求封装

VSCode自定义代码片段14——Vue的axios网络请求封装

canvas的代码封装