捏放大畫布

我想在畫布上設置一個簡單的放大/縮小功能。我使用KineticJS來處理觸摸事件並在畫布中繪圖，但無法實現縮放。 KinteicJS有一個類似的例子，但他們總是放大中心，而我有興趣放大手指之間的點。捏放大畫布

謝謝！

2012-06-06 KaBoom

對於那些仍然感興趣的人，我們可以如何在畫布中使用kineticJS進行縮放和平移。

2012-10-02 02:38:18 v1r00z

我的Android手機（Android 2.2的可能）趨向於移動視聚焦影像，當我捏變焦時，在演示（[fullscreen here]（http://fiddle.jshell.net/v1r00z/ZJE7w/show/light/））。你知道是否有辦法避免這種情況發生？ – KajMagnus

該演示不起作用！ – confile

全面的樣品我寫了一個項目顯示：
- 跨瀏覽器使用滾輪，包括Firefox（使用jquery.mousewheel.js）
- - 使用滾輪
各地鼠標指向桌面縮放的iPAD使用手指間夾點縮放
- 支持iPAD方向更改並禁用Safari自動縮放
- 縮放一層，同時保持其他圖層不縮放
- O OP JavaScript的「類」和代理活動，當地的方法

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="https://rawgithub.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script> 
</head> 
<body> 
    <div id="container"></div> 

<script type='text/javascript'> 
function makePos(x, y) { 
    return { 
     'x': x, 
     'y': y 
    }; 
} 


function View() { 
    this.init = init; 

    var self = this; 

    var kineticStage, 
     kineticLayer, 
     kineticTextLayer, 

     zoomOrigin = makePos(0, 0), 
     zoomFactor = 1.1, 
     pinchLastDist, pinchStartCenter; 

    init(); 

    function init() { 

     // disable ipad zoom to prevent safari from zooming on orientation change 
     $('head meta[name=viewport]').remove(); 
     $('head').prepend('<meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1.0 , initial-scale=1.0, maximum-scale=1.0" />'); 

     // create stage layer and circle 
     kineticStage = new Kinetic.Stage({ 
      container: 'container', 
      width: $(document).width() - 10, 
      height: $(document).height() - 10, 
     }); 

     kineticLayer = new Kinetic.Layer({ 
      draggable: true 
     }); 
     var circle = new Kinetic.Circle({ 
      x: 200, 
      y: 200, 
      radius: 50, 
      fill: '#00D200', 
      stroke: 'black', 
      strokeWidth: 2, 
     }); 
     kineticLayer.add(circle); 
     kineticStage.add(kineticLayer); 

     kineticTextLayer = new Kinetic.Layer({}); 
     kineticStage.add(kineticTextLayer); 

     // register events and proxy to methods 
     $(kineticStage.content).on('mousewheel', function(e) { 
      e.preventDefault(); 
      var evt = e.originalEvent; 
      stageMouseWheel.call(self, evt.deltaY, makePos(evt.clientX, evt.clientY)); 
     }); 
     kineticStage.getContent().addEventListener('touchmove', function(e) { 
      e.preventDefault(); // prevent iPAD panning 
      var touch1 = e.touches[0]; 
      var touch2 = e.touches[1]; 
      if (touch1 && touch2) { 
      touch1.offsetX = touch1.pageX - $(touch1.target).offset().left; 
      touch1.offsetY = touch1.pageY - $(touch1.target).offset().top; 
      touch2.offsetX = touch2.pageX - $(touch2.target).offset().left; 
      touch2.offsetY = touch2.pageY - $(touch2.target).offset().top; 
      stagePinch.call(self, makePos(touch1.offsetX, touch1.offsetY), makePos(touch2.offsetX, touch2.offsetY)); 
      } 
     }, false); 
     kineticStage.getContent().addEventListener('touchend', function(e) { 
      stageTouchEnd.call(self); 
     }, false); 

     $(window).on("orientationchange", function(event) { 
      window.scrollTo(0, 0); // scroll to top left on orientation change 
     }); 

     editTextLayer('scrollwheel/pinch to zoom'); 
     window.scrollTo(0, 0); 
    } 

    function zoom(newscale, center) { // zoom around center 
     var mx = center.x - kineticLayer.getX(), 
      my = center.y - kineticLayer.getY(), 
      oldscale = kineticLayer.getScaleX(); 
     editTextLayer('zoom ' + newscale.toFixed(2) + ' around ' + mx.toFixed(2) + ',' + my.toFixed(2)); 

     zoomOrigin = makePos(mx/oldscale + zoomOrigin.x - mx/newscale, my/oldscale + zoomOrigin.y - my/newscale); 

     kineticLayer.setOffset(zoomOrigin.x, zoomOrigin.y); 
     kineticLayer.setScale(newscale); 
     kineticLayer.draw(); 
    } 

    function stageMouseWheel(factor, p) { 
     var oldscale = kineticLayer.getScaleX(), 
      newscale = oldscale * (zoomFactor - (factor < 0 ? 0.2 : 0)); 
     zoom(newscale, p); 
    } 

    function stagePinch(p1, p2) { 
     var dist = Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2)); 
     if (!pinchLastDist) pinchLastDist = dist; 
     var newscale = kineticLayer.getScale().x * dist/pinchLastDist; 

     var center = makePos(Math.abs((p1.x + p2.x)/2), Math.abs((p1.y + p2.y)/2)); 
     if (!pinchStartCenter) pinchStartCenter = center; 

     zoom(newscale, pinchStartCenter); 
     pinchLastDist = dist; 
    } 

    function stageTouchEnd() { 
     pinchLastDist = pinchStartCenter = 0; 
    } 

    function editTextLayer(text) { 
     var label = new Kinetic.Text({ 
      x: 0, 
      y: 0, 
      text: text, 
      fontSize: 12, 
      fontFamily: 'Calibri', 
      fill: 'black' 
     }); 

     kineticTextLayer.destroyChildren(); 
     kineticTextLayer.add(label); 
     kineticTextLayer.drawScene(); 
    } 
} 


$(window).load(function() { 
    var view = new View(); 
}); 
</script> 

</body> 
</html>

http://jsfiddle.net/45YJH/1/

來源

2013-12-10 00:43:01 kofifus

回答

相關問題