HTML5分享：Canvas多点触控规模与KineticJS形状

来源：互联网发布：淘宝店怎么铺货编辑：程序博客网时间：2024/04/27 09:44

注:本实验室只适用于设备,支持多点触控手势如iOS因为它利用多个触摸事件。

产品说明:使用移动设备,支持多点触控手势如iOS,拖拽一个形状通过触摸它,然后把你的手指在屏幕上,激活一个形状,敲敲它,规模一个活跃的形状掐屏幕。

<!DOCTYPE HTML><html>  <head>    <style>      body {        margin: 0px;        padding: 0px;      }    </style>  </head>  <body>    <div id="container"></div>    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.7.3-beta.js"></script>    <script defer="defer">      var lastDist = 0;      var startScale = 1;      var activeShape = null;      function getDistance(p1, p2) {        return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));      }      var stage = new Kinetic.Stage({        container: 'container',        width: 578,        height: 200,        x: 286,        y: 100,        offset: [289, 100]      });      var layer = new Kinetic.Layer();      var triangle = new Kinetic.RegularPolygon({        x: 190,        y: stage.getHeight() / 2,        sides: 3,        radius: 80,        fill: 'green',        stroke: 'black',        strokeWidth: 4,        draggable: true,        name: 'triangle'      });      var circle = new Kinetic.Circle({        x: 380,        y: stage.getHeight() / 2,        radius: 70,        fill: 'red',        stroke: 'black',        strokeWidth: 4,        draggable: true,        name: 'circle'      });      stage.on('tap', function(evt) {        // set active shape        var shape = evt.targetNode;        activeShape = activeShape && activeShape.getName() === shape.getName() ? null : shape;        // sync scene graph        triangle.setAttrs({          fill: activeShape && activeShape.getName() === triangle.getName() ? '#78E7FF' : 'green',          stroke: activeShape && activeShape.getName() === triangle.getName() ? 'blue' : 'black'        });        circle.setAttrs({          fill: activeShape && activeShape.getName() === circle.getName() ? '#78E7FF' : 'red',          stroke: activeShape && activeShape.getName() === circle.getName() ? 'blue' : 'black'        });                layer.draw();      });      stage.getContent().addEventListener('touchmove', function(evt) {        var touch1 = evt.touches[0];        var touch2 = evt.touches[1];        if(touch1 && touch2 && activeShape) {          var dist = getDistance({            x: touch1.clientX,            y: touch1.clientY          }, {            x: touch2.clientX,            y: touch2.clientY          });          if(!lastDist) {            lastDist = dist;          }          var scale = activeShape.getScale().x * dist / lastDist;          activeShape.setScale(scale);          layer.draw();          lastDist = dist;        }      }, false);      stage.getContent().addEventListener('touchend', function() {        lastDist = 0;      }, false);      layer.add(triangle);      layer.add(circle);      stage.add(layer);    </script>  </body></html>