初遇createjs

背景

开发手机端微信H5场景应用，需要用到图片合成技术，开始了研究createjs之旅。
本文主要是分享在开发中遇到的问题几个小问题，适合初学者，如果你是大佬，可以帮我检查下有没有错，哈哈哈

介绍

EaselJS是createjs的一个模块。我主要用它绘图，写字，最后生成图片。
A JavaScript library that makes working with the HTML5 Canvas element easy.
一个使HTML5画布元素轻松工作的JavaScript库。

引入 EaselJS

方式一

 <script type="text/javascript" src="./assets/js/easeljs-0.8.2.min.js"></script>

方式二

import 'yuki-createjs/lib/easeljs-0.8.2.combined.js' //npm install yuki-createjs

使用vue开发的时候，使用官方的npm install createjs 遇到了问题，引入的时候比较麻烦，找到了这个传送门直接引入，不用配置，灰常好用。

开发问题

问题一:canvas如何全屏?

方案一
一开始查到的解决方案是js设置宽度为窗口的文档显示区的宽度。

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

以iphone5为例，window.innerWidth为320，canvas宽度为320，没什么问题（图片100%后面说）。

但是发现保存的图片宽度是320px，有点模糊，对图片大小有要求的就有点蛋疼了。这个方案就被我放弃了。演示代码：项目lesson1文件夹

方案二
canvas设置你想要的图片大小的宽度，比如说我想要保存750*1200的图片，给canvas加个width="750" height="1200",然后给他加个style="width:100%",然后他也全屏了，并且是你想呀的尺寸。

 <canvas id="canvas" width="750" height="1200" style="width:100%"></canvas>

如果你只想要width="750"高度自适应要怎么做呢？
在获取图片之后设置canvas的高度

 canvas.height = canvas.width *image.height/image.width ;

解决了画布的问题后我们来说图片撑满的问题。演示代码在项目lesson2文件夹

问题二:canvas绘制图片如何撑满?

添加关键的代码，设置图片的缩放比例就ok了。

   bitmap.scaleX = canvas.width / image.width;
   bitmap.scaleY = canvas.height / image.height;

很简单完美的呈现出来了，演示代码在项目lesson3文件夹

问题三:如何使用container？

 var rankData = [{
          rank: '第一:',
          name: '花花'
        }, {
          rank: '第二:',
          name: '瓜瓜'
        }]

想要将上面的数据拼接循环显示在图片中间位置，想要拼接组合起来的文字做居中，我查到的方法是放进container里（大家如果有更好的方法可以分享一下）。

        //添加名次
        var myContainer = new createjs.Container();
        var rankData = [{
          rank: '第一:',
          name: '花花花花花花花花'
        }, {
          rank: '第二二:',
          name: '瓜瓜'
        }, {
          rank: '第三第三:',
          name: '贝贝'
        }]
        var start = 0; // 起始位置
        var distance = 50; // 间距
        rankData.forEach(function (el) {
          let text = new createjs.Text(el.rank, "bold 24px Arial", "#ff0018");
          let text1 = new createjs.Text(el.name, "bold 24px Arial", "#282523");
          let w = text.getBounds().width; //获取字体宽度
          let w1 = text1.getBounds().width; //字体宽度
          text.x = start; //设置rank位置
          text1.x = start + w; //设置name位置0+text宽度
          start += w + w1 + distance; //写完第一个后，设置start为字体本身宽度+距离
          myContainer.addChild(text);//添加到容器里
          myContainer.addChild(text1);//添加到容器里
        }, this);
        stage.addChild(myContainer);
        //设置位置
        myContainer.x = (canvas.width - start + distance) / 2; // 横向居中,总长度减去拼接字体长度/2
        myContainer.y = canvas.height / 2; // 纵向居中
        stage.update();//更新视图

这样通过居中container就可以实现拼接字符串的居中了。
项目lesson4文件夹

---

结束

虽然很简单，但是如果你觉得有用你就点个赞，github送我个星星吧，哈哈。
愿我的世界挂满你送的小星星（づ￣3￣）づ╭❤～