初遇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￣）づ╭❤～