Question

无法缩放画布????任何帮助将不胜感激使用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>

Answer 1

以下是如何在点击的缩放点放大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>

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

1 个答案: