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);
    }
     
     

  • 相关阅读:
    C#基础知识简单梳理
    knearest neighbor
    二叉查找树的实现
    Unix/Linux 那些系统启动后的进程
    Nginx反向代理IIS
    线程漫谈——线程同步之信号量和互斥量
    BtxCMS@B.T.X 项目及界面展示 [下载]
    MVC in MFC or WTL
    HTTP HTTPS WebService
    ASP.NET WebAPI RC 竟然不支持最常用的json传参
  • 原文地址:https://www.cnblogs.com/qdcnbj/p/11233911.html
Copyright © 2011-2022 走看看