캔버스 확대/축소로 캔버스에

캔버스에서 간단한 확대/축소 기능을 설정하려고합니다. 터치 이벤트를 처리하고 캔버스에서 그리기 위해 KineticJS를 사용하지만 확대/축소를 구현할 수 없습니다. KinteicJS도 비슷한 예를 가지고 있지만, 손가락 사이의 포인트를 확대하려고하는 동안 항상 센터를 확대합니다.캔버스 확대/축소로 캔버스에

감사합니다.

출처

2012-06-06 KaBoom

캔버스에서 kineticJS로 확대/축소 및 팬을 수행하는 방법에 관심이있는 분들에게.

http://jsfiddle.net/v1r00z/ZJE7w/

출처

2012-10-02 02:38:18 v1r00z

내 안드로이드 폰
에 영업 자바 스크립트 '클래스'와 프록시 이벤트 (안드로이드 2.2 아마도)는 이미지에 초점을 맞 춥니 다 뷰포트를 이동하는 경향이 데모 ([fullscreen here] (http://fiddle.jshell.net/v1r00z/ZJE7w/show/light/)). 이런 일이 발생하지 않도록 할 수있는 방법이 있는지 알고 계십니까? – KajMagnus

데모가 작동하지 않습니다! – confile

내가 프로젝트 전시를 위해 쓴 포괄적 인 샘플 :
- 파이어 폭스 (사용 jquery.mousewheel.js)를 포함 crossbrowser의 스크롤 휠을 사용,
- - 바탕 화면 스크롤 휠
를 사용하여 마우스 점을 중심으로 확대 아이 패드 손가락 사이의 꼬집음을 사용하여 확대/축소
- iPAD 방향 변경 및 사파리 자동 줌 비활성화
- 다른 레이어를 확대/축소하지 않고 한 레이어 확대
- O 나는에, 줌을 꼬집어 때 현지 방법

<!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

답변

관련 문제