zoukankan      html  css  js  c++  java
  • 前端手势控制图片插件书写三(将transform变化应用在图片和canvas画布上)

    注意:transform的scale为负数时,图片会垂直翻转
    一、在使用transform将计算得到的变化应用到图片上后,需要考虑到我们每次计算的都是touchmove中本次的差量。在第一次移动过后。当进行第二次移动时,我们需要在第一次移动的位置基础上再次进行差量移动,所以首先需要创建一个公共变量来存储上次的位置。所以需要我们在每次touchstart的时候通过window.getComputedStyle(document.getElementById('div_bg_img'), null)
    获取到当前图片的css属性,来获取到tranform当前的位置并赋值给公共对象。而且在touchmove的时候,每次赋值给图片transform属性时,需要在公共对象的基础上进行变化
    $el.css('transform', `translate3d(${dragTrans.x + transform.x}px,${dragTrans.y + transform.y}px,0px) rotate(${dragTrans.rotate + transform.rotate}deg) scale(${dragTrans.scale * transform.scale})`);
     
    二、canvas画布的transform
    canvas的transform和图片tranform不一致,主要是canvas的transform永远以画布左上角原点为中心而csstransform可以以图片中心为原点。
    所以canvas的图片缩放和旋转都需要做相应的调整。
    eg:canvas实现中心旋转:
    ctx.translate(width / 2, height / 2 );
    ctx.rotate(angle * Math.PI / 180);
    ctx.translate(-width / 2,-height / 2 );
     
    eg:canvas实现中心缩放:
    ctx.translate(width / 2 * (1 - scaleX), height / 2 * (1 - scaleY));
    ctx.scale(scaleX, scaleY);
     
     
    三、eg:截取部分我的代码(处理canvas画布旋转加缩放)
    ctx.clearRect(0, 0, bg2.width * imageQuality, bg2.height * imageQuality);
    let diagonalPointX = (width/2 + trans.x);
    let diagonalPointY = (height/2 + trans.y);
    preRotate = trans.rotate;
    ctx.translate(diagonalPointX * imageQuality, diagonalPointY * imageQuality);
    ctx.rotate(trans.rotate*Math.PI/180);
    ctx.translate((-width / 2 + (1 - trans.scale) * width / 2) * imageQuality, (-height / 2 + (1 - trans.scale) * height / 2) * imageQuality );
    ctx.scale(trans.scale, trans.scale);
    if (orientation == 6){
    ctx.rotate(90 * Math.PI / 180);
    ctx.translate(0, -width * imageQuality);
    ctx.drawImage(pure_img, 0, 0, height * imageQuality, width * imageQuality);
    }
    else{
    ctx.drawImage(pure_img, 0, 0, width * imageQuality, height * imageQuality);
    }
     
     

  • 相关阅读:
    自定义能够for each的类,C#,Java,C++,C++/cli的实现方法
    答网友强护灰飞烟灭关于接口的问题
    浅谈C++的this指针
    padding与margin的区别(网上转的)
    啦啦啦 刚注册的,先水一篇~
    直接把页面的table导出到excel表中
    从FTP下载文件带进度条
    C# 从FTP上下载指定文件到本机
    “无法在证书存储区中找到清单签名证书”错误的解决方法
    网页设置不可复制
  • 原文地址:https://www.cnblogs.com/qdcnbj/p/11233911.html
Copyright © 2011-2022 走看看