hammer实现拖拽旋转缩放功能

本文主要是介绍hammer实现拖拽旋转缩放功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果：

 

首先下载hammer插件http://hammerjs.github.io/

html部分：

<script type="text/javascript" src="js/hammer.min.js"></script>

    <div class="resultCon">
        <p>人景合成图:</p>
        <div class="resultImgCon">
            <!--背景图-->
            <img src="img/beach.jpg" class="resultBg"/> 
            <!--人物抠图暂时不知道尺寸-->
            <img src="img/shape.png" class="resultP draggable" id="move-box" />
        </div>
    </div>

js部分：

<script>
        var reqAnimationFrame = (function () {
            return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
        })();

        var el = document.querySelector("#move-box");

        var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2);
        var START_Y = Math.round((window.innerHei

这篇关于hammer实现拖拽旋转缩放功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---