資訊專欄INFORMATION COLUMN
摘要：本文主要是分享在開發(fā)中遇到的問題幾個(gè)小問題，適合初學(xué)者，如果你是大佬，可以幫我檢查下有沒有錯(cuò)，哈哈哈介紹是的一個(gè)模塊。一個(gè)使畫布元素輕松工作的庫(kù)。開發(fā)問題問題一如何全屏方案一一開始查到的解決方案是設(shè)置寬度為窗口的文檔顯示區(qū)的寬度。
背景
開發(fā)手機(jī)端微信H5場(chǎng)景應(yīng)用，需要用到圖片合成技術(shù)，開始了研究createjs之旅。
本文主要是分享在開發(fā)中遇到的問題幾個(gè)小問題，適合初學(xué)者，如果你是大佬，可以幫我檢查下有沒有錯(cuò)，哈哈哈
EaselJS是createjs的一個(gè)模塊。我主要用它繪圖，寫字，最后生成圖片。
A JavaScript library that makes working with the HTML5 Canvas element easy.
一個(gè)使HTML5畫布元素輕松工作的JavaScript庫(kù)。
方式一
方式二
import "yuki-createjs/lib/easeljs-0.8.2.combined.js" //npm install yuki-createjs
使用vue開發(fā)的時(shí)候，使用官方的npm install createjs 遇到了問題，引入的時(shí)候比較麻煩，找到了這個(gè)傳送門直接引入，不用配置，灰常好用。
開發(fā)問題問題一:canvas如何全屏?
方案一
一開始查到的解決方案是js設(shè)置寬度為窗口的文檔顯示區(qū)的寬度。
canvas.width = window.innerWidth; canvas.height = window.innerHeight;
以iphone5為例，window.innerWidth為320，canvas寬度為320，沒什么問題（圖片100%后面說）。
但是發(fā)現(xiàn)保存的圖片寬度是320px，有點(diǎn)模糊，對(duì)圖片大小有要求的就有點(diǎn)蛋疼了。這個(gè)方案就被我放棄了。演示代碼：項(xiàng)目lesson1文件夾
方案二
canvas設(shè)置你想要的圖片大小的寬度，比如說我想要保存750*1200的圖片，給canvas加個(gè)width="750" height="1200",然后給他加個(gè)style="width:100%",然后他也全屏了，并且是你想呀的尺寸。
如果你只想要width="750"高度自適應(yīng)要怎么做呢？
在獲取圖片之后設(shè)置canvas的高度
canvas.height = canvas.width *image.height/image.width ;
解決了畫布的問題后我們來說圖片撐滿的問題。演示代碼在項(xiàng)目lesson2文件夾
問題二:canvas繪制圖片如何撐滿?
添加關(guān)鍵的代碼，設(shè)置圖片的縮放比例就ok了。
bitmap.scaleX = canvas.width / image.width; bitmap.scaleY = canvas.height / image.height;
很簡(jiǎn)單完美的呈現(xiàn)出來了，演示代碼在項(xiàng)目lesson3文件夾
問題三:如何使用container？
var rankData = [{
rank: "第一:",
name: "花花"
}, {
rank: "第二:",
name: "瓜瓜"
}]
想要將上面的數(shù)據(jù)拼接循環(huán)顯示在圖片中間位置，想要拼接組合起來的文字做居中，我查到的方法是放進(jìn)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; //設(shè)置rank位置
text1.x = start + w; //設(shè)置name位置0+text寬度
start += w + w1 + distance; //寫完第一個(gè)后，設(shè)置start為字體本身寬度+距離
myContainer.addChild(text);//添加到容器里
myContainer.addChild(text1);//添加到容器里
}, this);
stage.addChild(myContainer);
//設(shè)置位置
myContainer.x = (canvas.width - start + distance) / 2; // 橫向居中,總長(zhǎng)度減去拼接字體長(zhǎng)度/2
myContainer.y = canvas.height / 2; // 縱向居中
stage.update();//更新視圖
這樣通過居中container就可以實(shí)現(xiàn)拼接字符串的居中了。
項(xiàng)目lesson4文件夾
雖然很簡(jiǎn)單，但是如果你覺得有用你就點(diǎn)個(gè)贊，github送我個(gè)星星吧，哈哈。
愿我的世界掛滿你送的小星星（づ￣3￣）づ╭?～
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/54555.html
摘要：本文主要是分享在開發(fā)中遇到的問題幾個(gè)小問題，適合初學(xué)者，如果你是大佬，可以幫我檢查下有沒有錯(cuò)，哈哈哈介紹是的一個(gè)模塊。一個(gè)使畫布元素輕松工作的庫(kù)。開發(fā)問題問題一如何全屏方案一一開始查到的解決方案是設(shè)置寬度為窗口的文檔顯示區(qū)的寬度。 背景 開發(fā)手機(jī)端微信H5場(chǎng)景應(yīng)用，需要用到圖片合成技術(shù)，開始了研究createjs之旅。本文主要是分享在開發(fā)中遇到的問題幾個(gè)小問題，適合初學(xué)者，如果你是大佬...
摘要：主線程的目的是加載和驗(yàn)證配置文件維護(hù)工作線程。工作線程處理實(shí)際的請(qǐng)求，采用基于事件的模型和依賴操作系統(tǒng)的機(jī)制在工作線程之間高效地分發(fā)請(qǐng)求。安裝簡(jiǎn)單介紹下進(jìn)行安裝的操作。 nginx 是一個(gè)免費(fèi)的，開源的，高性能的HTTP服務(wù)器和反向代理，以及IMAP / POP3代理服務(wù)器。 Nginx 以其高性能，穩(wěn)定性，豐富的功能，簡(jiǎn)單的配置和低資源消耗而聞名。很多高知名度的網(wǎng)站都使用 Nginx...
時(shí)間：2018年04月08日星期日說明：本文部分內(nèi)容均來自慕課網(wǎng)。@慕課網(wǎng)：https://www.imooc.com 教學(xué)源碼：無 學(xué)習(xí)源碼：https://github.com/zccodere/s... 第一章：課程介紹 1-1 課程介紹 課程內(nèi)容 Spring Boot介紹 環(huán)境準(zhǔn)備 第一個(gè)Spring Boot項(xiàng)目 多模塊項(xiàng)目 打包和運(yùn)行 1-2 框架定位 showImg(https...
閱讀 2967·2021-11-25 09:43
閱讀 3633·2021-08-31 09:41
閱讀 1237·2019-08-30 15:56
閱讀 2119·2019-08-30 15:55
閱讀 2993·2019-08-30 13:48
閱讀 2816·2019-08-29 15:15
閱讀 984·2019-08-29 15:14
閱讀 2657·2019-08-28 18:26
