使用AlloyFinger 的手势缩放，外部按钮操控缩放, 3D改为2D减少放大模糊

项目中需要手势放大图片，懒得自己写组件库~找了好久，决定用AlloyFinger，但是呐~光用AlloyFinger不满足要求，只能中心放大，后续加入了AlloyCrop来达到可以按照手势点击位置放大，最后发现有“微信”浏览器等有部分不兼容matrix3d的，会变模糊。最后改动transform.js变成matrix的2d缩放。

1.AlloyFinger的使用【中心放大图片，太粗糙，达不到PD小姐姐预期】

有react版本的。。但是莫名不好用。。所以用了原生的，引用3个文件

import AlloyFinger from './src/alloy_finger.js';
import { To } from './src/to.js';
import './src/transform.js';

html页面

                <div id="imgBox">
                    <img id="testImg" src={this.state.imageUrl} />
                </div>

                <div className="operater-do">
                    <div className="ratina-bd operater-plus  bd-b" onClick={this.tabPlus.bind(this)}>
                        <div className="inline-block plus-icon"> + </div>
                    </div>
                    <div className="operater-minus" onClick={this.tabMinus.bind(this)}>
                        <div className="inline-block minus-icon"> - </div>
                    </div>
                </div>

初始化 图片加载

    imageLoaded(selector, onload) {
        var img = new Image();
        var dom = document.querySelector(selector);
        img.onload = function() {
            //real_width,real_height
            onload.call(dom, this.width, this.height);
            img.onload = null;
            img = null;
        };
        img.src = dom.getAttribute("src");
    }

吸附屏幕效果

    //吸附屏幕效果
    stickEffect(el) {
        // 超出屏幕外，吸附动效返回
        // 当前屏幕位置
        let left = $("#testImg").offset().left;
        let top = $("#testImg").offset().top;
        // 图片宽高
        let imgWidth = $("#testImg").width();
        let imgHeight = $("#testImg").height();
        // 屏幕宽高，高度=屏幕高度
        let winWidth = window.innerWidth;
        let winHeight = window.innerHeight ;

        let skWidth = $("#testImg").width() * el.scaleX;
        let skHeight = $("#testImg").height() * el.scaleY;
        let setLeft = left;
        let setTop = top;

        if (left > 0 || top > 0 || skWidth + left < winWidth || skHeight + top - bannerHight < winHeight) {
            //console.log("超出屏幕范围");
            if (left > 0) {
                setLeft = 0;
            }
            if (top > 0) {
                setTop = bannerHight;
            }
            if (skWidth + left < winWidth) {
                setLeft = -(skWidth - winWidth);
            }
            if (skHeight + top - bannerHight < winHeight) {
                setTop = -(skHeight - winHeight - bannerHight);
            }

            console.log("before，top：" + $("#testImg").offset().top, "left：", $("#testImg").offset().left);
            console.log("stickEffect，top：" + Math.ceil(setTop), "left：", Math.ceil(setLeft));

            $("#testImg").offset({