kineticjs 4.7.4 및 jquery.mousewheel.js를 사용하여 초점 이동 및 확대/축소

캔버스를 확대 할 수 없습니다 ???? 어떤 도움도 jquery.mousewheel.js를 사용하여 주시면 감사하겠습니다.kineticjs 4.7.4 및 jquery.mousewheel.js를 사용하여 초점 이동 및 확대/축소

kinetic를 통해 이미지를로드 할 수 있었지만 줌이 전혀 작동하지 않습니다.

가능한 경우 내 코드로 확대/축소를하고 싶습니다. 당신은 버튼 이벤트 마우스 휠 이벤트를 대체 할 수

예를 들어 여기에

enter code here 

<!doctype html> 
<html> 
<head> 

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

<script type="text/javascript" src="kinetics.js"></script> 
<style> 
canvas 
{ 
border: 1px solid #aaa; 
-moz-box-shadow: 3px 3px 8px #222; 
-webkit-box-shadow: 3px 3px 8px #222; 
box-shadow: 3px 3px 8px #222; 
} 
body { 
background-image: 
-moz-linear-gradient(45deg, #C0C0C0 25%, transparent 25%,transparent 75%, #C0C0C0 75%, #C0C0C0 100%), 
-moz-linear-gradient(45deg, #C0C0C0 25%, transparent 25%,transparent 75%, #C0C0C0 75%, #C0C0C0 100%); 
background-image: 
-webkit-linear-gradient(45deg, #C0C0C0 25%, transparent 25%,transparent 75%, #C0C0C0 75%, #C0C0C0 100%), 
-webkit-linear-gradient(45deg, #C0C0C0 25%, transparent 25%,transparent 75%, #C0C0C0 75%, #C0C0C0 100%); 
-moz-background-size:20px 20px; 
background-size:20px 20px; 
-webkit-background-size:20px 20px; 
background-position:0 0, 30px 30px; 
padding:10px; 
} 
#container1, #container2 { 

border:solid 1px #ccc; 
margin-top: 10px; 
width:300px; 
height:100px; 
} 
#container2 { 
height:300px; 
width:600px; 
} 
</style> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 

<!-- <body onload="go_kinetics();"> --> 
<body onload="test();"> 
<div id="container"></div> 
<!-- 
<div id="container1"></div> 
<div id="container2"></div> 
--> 
</body> 
</html>

출처

2014-06-23 user3766859

클릭 된 줌 포인트에서 KineticJS 단계를 확대하는 방법의 시작 예입니다 그것의 의미를 이해하는 것이 좋을 것이다 줌을 구동합니다.

각 요소에 offsetX를 추가하여 패닝을 수행하도록이 예를 조정할 수 있습니다.

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
    #container{ 
     border:solid 1px #ccc; 
     margin-top: 10px; 
     width:350px; 
     height:350px; 
    } 
    </style> 
    </head> 
    <body> 
    <h3>Click on a point on the canvas.<br>The canvas will zoom at that point.<br>Then use zoom buttons.</h3> 
    <button id="larger">Zoom-In at clicked point</button> 
    <button id="smaller">Zoom-Out at clicked point</button> 
    <div id="container"></div> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script> 
    $(function(){ 


     var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 400, 
     height: 400 
     }); 
     var layer = new Kinetic.Layer(); 
     stage.add(layer); 

     // parentGroup is used in jquery events 
     // so make it global 
     var parentGroup; 

     // load the image and then start the app 
     var image=new Image(); 
     image.onload=function(){ 
      start(); 
     } 
     image.src="houseicon.png"; 

     // build everything, wire events 
     function start(){ 

      parentGroup=new Kinetic.Group({ 
       x:0, 
       y:0, 
       width:image.width, 
       height:image.height 
      }); 
      parentGroup.offsetX=0; 
      parentGroup.offsetY=0; 
      parentGroup.scalePtX=0; 
      parentGroup.scalePtY=0; 
      parentGroup.scaleFactor=1.00; 
      parentGroup.scaleBy=function(scaleChange){ 

       // undo previous offset 
       this.offsetX += this.scalePtX/this.scaleFactor; 
       this.offsetY += this.scalePtY/this.scaleFactor; 

       // calc new scaling factor 
       var newScaleFactor = this.scaleFactor*(1+scaleChange); 

       // create new offset 
       this.offsetX -= this.scalePtX/newScaleFactor; 
       this.offsetY -= this.scalePtY/newScaleFactor; 

       // set new scale factor 
       this.scaleFactor=newScaleFactor; 

       // do the new offset 
       this.setOffset(this.offsetX,this.offsetY); 

       // do the new scale 
       this.setScale(this.scaleFactor); 

       layer.draw(); 
      }; 
      layer.add(parentGroup); 

      var kImage=new Kinetic.Image({ 
       image:image, 
       x:0, 
       y:0, 
       width:image.width, 
       height:image.height 
      }); 
      parentGroup.add(kImage); 

      var childGroup=new Kinetic.Group({ 
       x:0, 
       y:0, 
       width:100, 
       height:50 
      }); 
      parentGroup.add(childGroup); 

      var childRect=new Kinetic.Rect({ 
       x:0, 
       y:0, 
       width:105, 
       height:25, 
       stroke:"lightgray", 
       fill:"skyblue" 
      }); 
      childGroup.add(childRect); 

      var childText=new Kinetic.Text({ 
       x:5, 
       y:3, 
       fontSize:18, 
       text:"Hello, World", 
       fill:"blue" 
      }); 
      childGroup.add(childText); 

      layer.draw(); 

      // scale up by +0.10 at parentGroup scalePtX/scalePtY 
      $("#larger").click(function(){ 
       parentGroup.scaleBy(0.10); 
      }); 

      // scale up by +0.10 at parentGroup scalePtX/scalePtY 
      $("#smaller").click(function(){ 
       parentGroup.scaleBy(-0.10); 
      }); 

      // set parentGroup scalePtX/scalePtY 
      $(stage.getContent()).on('click', function (event) { 
       var pos=stage.getPointerPosition(); 
       var mouseX=parseInt(pos.x); 
       var mouseY=parseInt(pos.y); 
       parentGroup.scalePtX=mouseX; 
       parentGroup.scalePtY=mouseY; 
      }); 


     } // end start 





}); // end onload 
    </script> 
    </body> 
</html>

출처

2014-06-23 16:40:47 markE

고맙습니다. @markE – user3766859

kineticjs 4.7.4 및 jquery.mousewheel.js를 사용하여 초점 이동 및 확대/축소

답변

관련 문제