初遇createjs

ddongjian0000 发布于2019-08-02 16:02 / 2756人阅读

摘要：本文主要是分享在开发中遇到的问题几个小问题，适合初学者，如果你是大佬，可以帮我检查下有没有错，哈哈哈介绍是的一个模块。一个使画布元素轻松工作的库。开发问题问题一如何全屏方案一一开始查到的解决方案是设置宽度为窗口的文档显示区的宽度。

背景

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

介绍

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

引入 EaselJS

方式一

方式二

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%",然后他也全屏了，并且是你想呀的尺寸。

如果你只想要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￣）づ╭❤～

混合云专线服务 CreateJS 初遇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54555.html

初遇createjs

摘要：本文主要是分享在开发中遇到的问题几个小问题，适合初学者，如果你是大佬，可以帮我检查下有没有错，哈哈哈介绍是的一个模块。一个使画布元素轻松工作的库。开发问题问题一如何全屏方案一一开始查到的解决方案是设置宽度为窗口的文档显示区的宽度。背景开发手机端微信H5场景应用，需要用到图片合成技术，开始了研究createjs之旅。本文主要是分享在开发中遇到的问题几个小问题，适合初学者，如果你是大佬...

hedzr 2019-08-22 18:04 评论0 收藏0
初遇，打开心

摘要：第一次相遇见到大神漂亮的首页，顿时折服，为了做这个忠实粉，我来了我喜欢具有画面感的东西，看到很漂亮的就会很兴奋，高兴好久，希望在这里遇见更多我喜欢的东西，大家共勉。把心拿出来初遇，打开心爱你不过，请升级坐标随机色绘制心第一次相遇：见到大神漂亮的首页，顿时折服，为了做这个忠实粉，我来了！我喜欢具有画面感的东西，看到很漂亮的就会很兴奋，高兴好久，希望在这里遇见更多我喜欢的东西，大家共勉。...

stormgens 2019-08-05 10:18 评论0 收藏0
初遇，打开心

摘要：第一次相遇见到大神漂亮的首页，顿时折服，为了做这个忠实粉，我来了我喜欢具有画面感的东西，看到很漂亮的就会很兴奋，高兴好久，希望在这里遇见更多我喜欢的东西，大家共勉。把心拿出来初遇，打开心爱你不过，请升级坐标随机色绘制心第一次相遇：见到大神漂亮的首页，顿时折服，为了做这个忠实粉，我来了！我喜欢具有画面感的东西，看到很漂亮的就会很兴奋，高兴好久，希望在这里遇见更多我喜欢的东西，大家共勉。...

JohnLui 2019-08-20 12:00 评论0 收藏0
初遇Nginx之简介

摘要：主线程的目的是加载和验证配置文件维护工作线程。工作线程处理实际的请求，采用基于事件的模型和依赖操作系统的机制在工作线程之间高效地分发请求。安装简单介绍下进行安装的操作。 nginx 是一个免费的，开源的，高性能的HTTP服务器和反向代理，以及IMAP / POP3代理服务器。 Nginx 以其高性能，稳定性，丰富的功能，简单的配置和低资源消耗而闻名。很多高知名度的网站都使用 Nginx...

Ryan_Li 2019-07-25 14:49 评论0 收藏0
慕课网_《Spring Boot 2.0深度实践-初遇Spring Boot》学习总结

时间：2018年04月08日星期日说明：本文部分内容均来自慕课网。@慕课网：https://www.imooc.com 教学源码：无学习源码：https://github.com/zccodere/s... 第一章：课程介绍 1-1 课程介绍课程内容 Spring Boot介绍环境准备第一个Spring Boot项目多模块项目打包和运行 1-2 框架定位 showImg(https...

hqman 2019-08-15 15:19 评论0 收藏0