使用kineticjs 4.7.4和jquery.mousewheel.js进行平移和缩放

pan and zoom using kineticjs 4.7.4 and jquery.mousewheel.js

本文关键字：缩放 mousewheel kineticjs jquery 使用 js      更新时间：2023-09-26

无法缩放画布????jquery.mousewheel.js

我已经能够通过动态加载图像，但是变焦根本不起作用。

如果可能的话，我想用我的代码来调整一下缩放。

一个例子可以很好地理解它的含义

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>

这是一个如何在单击缩放点时缩放到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>
相关文章：