一周项目总结

一周项目总结(20181027)：

1.原生选择框（仅限于移动端使用）

    

        请选择游戏角色
    
    
        角色1
        角色2
        角色3
    

样式上面把select绝对定位在rel上面，然后透明度为0即可

$('#role').on('change', function () {
  var selectedIndex = $(this)[0].selectedIndex;
  $('.rel').text(selectedRole.name)
})

问题：由于默认是角色1，所以第一次选择角色1不触发change

解决方法：加一个选项请选择游戏角色然后把它隐藏掉

这样做在部分浏览器是可以隐藏的,在safri上面不能隐藏的，不过也不影响使用了

2.canvas绘图

2.1准备工作

createjs地址:http://www.createjs.cc/

EaselJS模块：http://www.createjs.cc/easeljs

这次我使用的是easeljs来绘图，它有丰富的api，能够很好的解决在canvas中写大段文字不对称的问题

首先你需要把图片地址都写在data.js中：

var pics = [
  __uri("../img/pics/0.jpg"),
  __uri("../img/pics/1.jpg"),
  __uri("../img/pics/2.jpg"),
  __uri("../img/pics/3.jpg"),
]

然后如果页面上有img标签已经载入了这张图片，那么就不需要做图片加载了，否则需要用到这个：

var flag = 0
for (var i = 0; i < imgs.length; i++) {
  var $img = new Image()
  $img.src = imgs[i]
  $img.onload = function () {
    flag++
    if (flag == imgs.length) {
      cb();
    }
  }
}

把所有图片加载完成之后再开始绘图工作

2.2正式开始绘图

别忘了导入easyljs

2.2.1获取canvas对象

 var stage = new createjs.Stage("canvas")

2.2.2把要画的内容实例化为createjs对象

 var bg = new createjs.Bitmap(pics[0]),
       txts = new createjs.Text("", "24px Microsoft Yahei", "#fff")

2.2.3设置图片或者文字的属性

2.2.3.1图片

 var bounds1 = bg.getBounds()
      bg.scaleX = 504 / bounds1.width
      bg.scaleY = 630 / bounds1.height
      bg.x = 0;
      bg.y = 0
      stage.addChild(bg)

getBounds():获取图片在页面上的实际大小(px)

504:对应设计稿上的图片宽度

630:设计稿图片高度

x,y的值都是相对于父元素的值

stage.addChild(bg):最后！！！！把图片添加到舞台中去

2.2.3.2文字

首行缩进暂时没有其他办法，只能用空格代替：

txts.text = '       ' + $('.before-loading .txt').text().trim()
txts.lineWidth = 470;
txts.lineHeight = 42;
txts.x = 20;
txts.y = 318;
stage.addChild(txts)

2.3更新canvas
stage.update();

2.4生成图片

 $('#rel_img').attr('src', stage.toDataURL())

2.5额外的补充说明

！！！canvas中用的图片必须上传到本项目目录下，否则会造成跨域而无法生成图片

！！！本项目用到了base64二维码，由于生成二维码需要一段时间，所以先显示canvas，延迟之后再生成图片地址隐藏canvas

3.移动端常用事件变体

3.1长按：

function bindLongTouch(cls, cb) {
        var longClick = false;
        $(cls).on({
          touchstart: function (e) {
            longClick = false;//设置初始为false
            timeOutEvent = setTimeout(function () {
              //此处为长按事件-----在此显示遮罩层及删除按钮
              longClick = true;//假如长按，则设置为1
            }, 500);
          },
          touchmove: function (e) {
            clearTimeout(timeOutEvent);
            timeOutEvent = 0;
          },
          touchend: function (e) {
            clearTimeout(timeOutEvent);
            if (timeOutEvent != 0 && longClick == true) {
              //此处为点击事件----在此处添加跳转详情页
              cb()
            }
          }
        });
      }

3.2双指缩放

核心：e.touches对象

e.touches.length:同时放在屏幕上的手指个数

e.touches[i]表示第i个手指对象，里面有位置坐标

在iOS上有一组双指事件gesturestart、gesturechange、gestureend ，安卓上面没有，所以先判断是否是ios，不是则自定义这几个方法

这些基本的核心内容知道了，接下来就应该知道怎么做了，利用勾股定理求出两个点的坐标差，然后相除就得到缩放比例

如:x2y2/x1y1