初遇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%后面说)。
clipboard.png

但是发现保存的图片宽度是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文件夹

clipboard.png

问题三:如何使用container?

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

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

clipboard.png


        //添加名次
        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 ̄)づ╭❤~

阅读 4.9k

玩的转前端,搞的定产品,骑车能上三十五,努力跑个马拉松

1.7k 声望
164 粉丝
0 条评论

玩的转前端,搞的定产品,骑车能上三十五,努力跑个马拉松

1.7k 声望
164 粉丝
文章目录
宣传栏