init

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["env"]
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+*.log

dist/schedule.js

@@ -0,0 +1,366 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var days = ["一", "二", "三", "四", "五", "六", "日"];
+var dayMap = {
+  1: "一",
+  2: "二",
+  3: "三",
+  4: "四",
+  5: "五",
+  6: "六",
+  7: "日"
+};
+var firstColWidth = 25;
+var header = {
+  size: 10,
+  height: 50,
+  bg: "#f5f5f5",
+  color: "#555",
+  lineColor: "#d0d0d0"
+};
+var colHeader = {
+  size: 10,
+  width: 25,
+  bg: "#f5f5f5",
+  color: "#555",
+  lineColor: "#d0d0d0"
+};
+var courseStyle = {
+  color: "#fff",
+  size: 10,
+  top: 5
+  // title set
+};var titleStyle = {
+  size: 20,
+  height: 50,
+  color: "#000",
+  bg: "#f5f5f5"
+};
+/**
+ * 微信小程序Canvas课程表，用于展示或者是分享图
+ * @class Schdule
+ */
+
+var Schedule = function () {
+  /**
+   * 对象初始化
+   * @param {Object} options 参数 
+   */
+  function Schedule(options) {
+    var _this = this;
+
+    _classCallCheck(this, Schedule);
+
+    // 必要参数，canvas id，长宽
+    ["id", "width", "height"].forEach(function (e) {
+      _this.optionCheck(e, options);
+    }, this);
+
+    this.title = options.title || '';
+
+    // 不必要参数
+    // 日期
+    this.days = options.days || days;
+
+    // 标题，第一列，第一行样式设置
+    this.titleStyle = options.titleStyle || titleStyle;
+    this.colHeader = options.colHeader || colHeader;
+    this.header = options.header || header;
+
+    // 一天多少节课
+    this.sessions = options.sessions || 13;
+
+    // 课程宽度
+    this.courseWidth = options.courseWidth || (this.width - this.colHeader.width) / this.days.length;
+    if (options.courseHeight) {
+      this.courseHeight = options.courseHeight;
+    } else if (this.title != '') {
+      this.courseHeight = (this.height - this.titleStyle.height - this.header.height) / this.sessions;
+    } else {
+      this.courseHeight = (this.height - this.header.height) / this.sessions;
+    }
+
+    // 设置首行文字大小
+    if (!('header' in options) || !options.header) {
+      this.header = header;
+      this.header.size = this.courseWidth / 2 - 10;
+    }
+    // 课程样式
+    this.courseStyle = options.courseStyle || courseStyle;
+
+    // 获取canvas对象
+    this.ctx = wx.createCanvasContext(this.id);
+
+    // 
+    this.startY = 0;
+
+    // 
+    this.options = options;
+  }
+
+  /**
+   * 参数校验
+   * @param {String} props 属性 
+   * @param {Object} option 参数
+   */
+
+
+  _createClass(Schedule, [{
+    key: "optionCheck",
+    value: function optionCheck(props, option) {
+      if (!(props in option)) {
+        console.error("缺少" + props);
+        throw "缺少" + props;
+      }
+      this[props] = option[props];
+    }
+
+    /**
+     * 绘制课程表
+     * courses = [
+     *  {
+     *    name:  '', // 课程名,
+     *    address: '', // 课程地址,
+     *    bg: '#000', //课程背景色,
+     *    sessionArr: [1,2,3], // 上课节次
+     *    day: 1, // 周几上课
+     *  }
+     * ]
+     * @param {Array} courses 课程表
+     */
+
+  }, {
+    key: "drawSchedule",
+    value: function drawSchedule(courses) {
+      var _this2 = this;
+
+      var ctx = this.ctx;
+      if (this.title) {
+        this.drawTitle();
+      }
+
+      // 绘制第一行
+      this.drawHeader();
+      this.startY += this.header.height;
+
+      // 第一列
+      this.drawFirstCol();
+
+      // 获得课程,绘制课程
+      courses.forEach(function (course) {
+        _this2.drawCourse(course);
+      });
+
+      ctx.draw();
+    }
+
+    /**
+     * 保存临时图片到相册
+     * @param {String} path 
+     */
+
+  }, {
+    key: "saveImage",
+    value: function saveImage(path) {
+      return new Promise(function (resolve, reject) {
+        wx.saveImageToPhotosAlbum({
+          filePath: path,
+          success: function success(res) {
+            return resolve(res);
+          },
+          fail: function fail(res) {
+            return reject(res);
+          }
+        });
+      });
+    }
+
+    /**
+     * canvas 转临时图片
+     * @return path
+     */
+
+  }, {
+    key: "canvasToImg",
+    value: function canvasToImg() {
+      var id = this.id;
+      return new Promise(function (resolve, reject) {
+        wx.canvasToTempFilePath({
+          canvasId: id,
+          success: function success(res) {
+            return resolve(res.tempFilePath);
+          },
+          fail: function fail(res) {
+            return reject(res);
+          }
+        });
+      });
+    }
+  }, {
+    key: "drawTitle",
+    value: function drawTitle() {
+      var ctx = this.ctx;
+      // 绘制标题
+      ctx.setFillStyle(this.header.bg);
+      ctx.fillRect(0, 0, this.width, this.titleStyle.height);
+      ctx.beginPath();
+      ctx.moveTo(0, this.titleStyle.height);
+      ctx.lineTo(this.width, this.titleStyle.height);
+      ctx.setStrokeStyle(this.header.lineColor);
+      ctx.stroke();
+      ctx.closePath();
+      this.drawText(ctx, this.title, (this.width - this.courseWidth) / 2, this.startY, 20, titleStyle);
+      this.startY += this.titleStyle.height;
+    }
+
+    /**
+     * 绘制背景色
+     * @param {String} bg 背景色 
+     */
+
+  }, {
+    key: "drawBg",
+    value: function drawBg() {
+      var bg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "#f8f8f5";
+
+      this.ctx.rect(0, 0, this.width, this.height);
+      this.ctx.setFillStyle(bg);
+      this.ctx.fill();
+    }
+
+    /**
+     * 绘制首行
+     */
+
+  }, {
+    key: "drawHeader",
+    value: function drawHeader() {
+      var ctx = this.ctx;
+      ctx.setFillStyle(this.header.bg);
+      ctx.fillRect(0, this.startY, this.width, this.header.height);
+      ctx.setStrokeStyle(this.header.lineColor);
+      ctx.setLineWidth(1);
+      ctx.setTextAlign("center");
+      ctx.setFillStyle(this.header.color);
+      ctx.setFontSize(this.header.size);
+      for (var i = 0; i < this.days.length; i++) {
+        ctx.beginPath();
+        ctx.moveTo(this.colHeader.width + i * this.courseWidth, this.startY);
+        ctx.lineTo(this.colHeader.width + i * this.courseWidth, this.startY + this.header.height);
+        ctx.stroke();
+        ctx.closePath();
+        ctx.fillText("周" + days[i], this.colHeader.width + this.courseWidth / 2 + i * this.courseWidth, this.startY + (this.header.height + this.header.size) / 2);
+      }
+    }
+
+    /**
+     * 绘制第一列
+     */
+
+  }, {
+    key: "drawFirstCol",
+    value: function drawFirstCol() {
+      var ctx = this.ctx;
+      ctx.setFillStyle(this.header.bg);
+      ctx.fillRect(0, this.startY, this.colHeader.width, this.height);
+      ctx.setStrokeStyle(this.header.lineColor);
+      ctx.setLineWidth(1);
+      ctx.setTextAlign("center");
+      ctx.setFillStyle(this.header.color);
+      ctx.setFontSize(this.header.size);
+      for (var i = 0; i <= this.sessions; i++) {
+        ctx.beginPath();
+        ctx.moveTo(0, this.courseHeight * i + this.startY);
+        ctx.lineTo(this.colHeader.width, this.courseHeight * i + this.startY);
+        ctx.stroke();
+        ctx.closePath();
+        if (i == this.sessions) continue;
+        ctx.fillText(i + 1, this.colHeader.width / 2, this.courseHeight * (i + 0.5) + this.startY + this.header.size / 2);
+      }
+    }
+    /**
+     * 绘制课程
+     * @param {Object} course 课程
+     */
+
+  }, {
+    key: "drawCourse",
+    value: function drawCourse(course) {
+      var ctx = this.ctx;
+      // 定位
+      var x = this.colHeader.width + this.getCourseDayX(course.day) * this.courseWidth;
+      var y = (course.sessionArr[0] - 1) * this.courseHeight + this.startY;
+      ctx.setFillStyle(course.bg);
+      // 绘制背景
+      ctx.fillRect(x, y, this.courseWidth, this.courseHeight * course.sessionArr.length);
+      // 绘制文字
+      y = y + this.courseStyle.top;
+      y = this.drawText(ctx, course.name, x, y, 4, this.courseStyle);
+      this.drawText(ctx, "@" + course.address, x, y, 4, this.courseStyle);
+    }
+    /**
+     * 获取课程的偏移位置
+     * @param {Number} day 周几，1 = 周一 
+     */
+
+  }, {
+    key: "getCourseDayX",
+    value: function getCourseDayX(day) {
+      for (var i = 0; i < this.days.length; i++) {
+        if (this.days[i] === dayMap[day]) {
+          return i;
+        }
+      }
+      throw "课程时间和设置不匹配！";
+    }
+  }, {
+    key: "drawText",
+    value: function drawText(ctx, str, x, y, len, style) {
+      str = str.trim();
+      ctx.setFillStyle(style.color);
+      ctx.setTextAlign("center");
+      ctx.setFontSize(style.size);
+      for (var i = 0; i < str.length / len; i++) {
+        y = y + style.size * 1.5;
+        ctx.fillText(str.substr(i * len, len), x + this.courseWidth / 2, y);
+      }
+      return y;
+    }
+  }, {
+    key: "download",
+    value: function download(url) {
+      return new Promise(function (resolve, reject) {
+        wx.downloadFile({
+          url: url,
+          success: function success(res) {
+            if (res.statusCode === 200) {
+              resolve(res.tempFilePath);
+            } else {
+              reject(res);
+            }
+          },
+          fail: function fail(res) {
+            return reject(res);
+          }
+        });
+      });
+    }
+  }, {
+    key: "log",
+    value: function log() {
+      console.log(this.options);
+    }
+  }]);
+
+  return Schedule;
+}();
+
+exports.default = Schedule;

example/app.js

@@ -0,0 +1,5 @@
+App({
+  onLaunch: function () {
+
+  }
+})

example/app.json

@@ -0,0 +1,11 @@
+{
+  "pages":[
+    "index/index"
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "WeChat",
+    "navigationBarTextStyle":"black"
+  }
+}