Question

4.1 封装常用的绘制函数

4.1.1 封装一个矩形

//思考：我们用到的矩形需要哪些绘制的东西呢？

1. 矩形的 x、y 坐标
2. 矩形的宽高
3. 矩形的边框的线条样式、线条宽度
4. 矩形填充的样式
5. 矩形的旋转角度
6. 矩形的缩小放大

//下面是把上面所有的功能进行封装的代码：
function ItcastRect( option ) {//矩形构造函数
  this._init(option);
}
ItcastRect.prototype = {  //矩形的原型对象
  _init: function( option ) {  //初始化方法
    option = option || {};
    this.x = option.x === 0 ? 0 : option.x || 100;
    this.y = option.y === 0 ? 0 : option.y || 100;
    this.w = option.w || 100;
    this.h = option.h || 100;
    this.angle = option.angle === 0 ? 0 : option.angle || 0;
    this.fillStyle = option.fillStyle || 'silver';
    this.strokeStyle = option.strokeStyle || 'red';
    this.strokeWidth = option.strokeWidth || 4;
    this.scaleX = option.scaleX || 1;
    this.scaleY = option.Y || 1;
  },
  render: function( ctx ) {//把矩形渲染到 canvas 中
    ctx.save();
    ctx.translate( this.x, this.y );//位移画布
    ctx.rotate( this.angle * Math.PI / 180 );//旋转角度
    ctx.scale( this.scaleX, this.scaleY );//缩放
    ctx.fillStyle = this.fillStyle;
    ctx.fillRect( 0, 0, this.w, this.h ); //填充矩形
    ctx.lineWidth = this.strokeWidth;   //线宽
    ctx.strokeStyle = this.strokeStyle;   //填充样式
    ctx.strokeRect( 0,0,this.w,this.h );  //描边样式
    ctx.restore();
  },
  constructor: ItcastRect
};

• 4.1.2 作业：尝试着封装一个圆形？

//封装圆形的代码的答案：不要偷看
function ItcastCircle(option) {
  this._init(option);
}
ItcastCircle.prototype = {
  _init: function(option) {
  option = option || {};
  this.x = option.x === 0 ? 0 : option.x || 100;
  this.y = option.y === 0 ? 0 : option.y || 100;
  this.w = option.w || 100;
  this.h = option.h || 100;
  this.angle = option.angle === 0 ? 0 : option.angle || 0;
  this.fillStyle = option.fillStyle || 'silver';
  this.strokeStyle = option.strokeStyle || 'red';
  this.strokeWidth = option.strokeWidth || 4;
  this.scaleX = option.scaleX || 1;
  this.scaleY = option.Y || 1;
  this.opactity = option.opactity || 1;
  this.counterclockwise =
    option.counterclockwise === true
    ? true
    : option.counterclockwise || false;
  this.startAngle = option.startAngle == 0 ? 0 : option.startAngle || 0;
  this.endAngle = option.endAngle == 0 ? 0 : option.endAngle || 0;
  this.startAngle = (this.startAngle * Math.PI) / 180;
  this.endAngle = (this.endAngle * Math.PI) / 180;
  this.r = option.r || 100;
  },
  render: function(ctx) {
  ctx.save();
  ctx.translate(this.x, this.y);
  ctx.scale(this.scaleX, this.scaleY);
  ctx.rotate((this.agnle * Math.PI) / 180);
  ctx.globalAlpha = this.opacity;
  ctx.fillStyle = this.fillStyle;
  ctx.strokeStyle = this.strokeStyle;
  ctx.moveTo(0, 0);
  ctx.arc(
    0,
    0,
    this.r,
    this.startAngle,
    this.endAngle,
    this.counterclockwise
  );
  ctx.fill();
  ctx.stroke();
  ctx.restore();
  },
  constructor: ItcastCircle
};

4.2 第三方库使用

• Rgraph vs 百度的 echart

https://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph/

• 国产的 egret 引擎

 http://www.egret-labs.org/

• 比较火的 3d 引擎：treejs

http://threejs.org/

• Konva

官网：http://konvajs.github.io/
  特点：
   * 小巧、使用方便、适合移动端和 pc 端
   * 支持丰富的事件处理操作
   * 支持类似 JQuery 的操作方式（顺带能复习 jQueyr）
   * 开源，可以随意更改
   * 社区更新比较活跃，github 托管源码
   * 性能也不错

• 其他的还有很多，希望以后能用到你们的库。