1

ここに私が持っている構造があります

Layer:
  ParentGroup:
     -Kinetic Image 
     -ChildGroup 
        - Kinetic rectangle
        - Kinetic Text

私の動的画像 (サーバーから取得したもの) には、関心のある領域があります。この関心領域は、長方形 (ここでは動的長方形) で示されます。そして、この領域内に何らかのラベルを書きます (これがキネティック テキストです)。

グループ全体にいくつかの操作を適用したいと思います。翻訳は問題ありませんが、ズームと回転に問題があります。ここに私のズーム機能があります

function zoomIn() {
      var scale=parentGroup.getScale();
      scale.x *= zoomFactor; //zoomFactor is a global variable
      scale.y *= zoomFactor;
      parentGroup.setScale(scale); 
      layer.draw()
}

ここで起こったことは、グループが拡大されたと同時に平行移動 (右と下) されたことです。ズームし続けると、画像がキャンバスからはみ出してしまいます。レイヤーを描画する前に試してみました: parentGroup.setPosition (0,0);//この位置を変更したことがないことはわかっていますが、何も変更されていません。

ここで、KineticJS Canvas - Scale group from center pointを読みましたが、それはズームの中心の問題かもしれません。しかし、parentGroup に高さや幅を設定していないため、コードを適応させる方法がわかりませんでした。

私が今持っているものの何が問題になっていますか？

4

1 に答える 1

2

KineticJS: グループをズーム、回転、ドラッグする方法

[質問者のニーズをよりよく理解することに基づいて、元の回答を簡略化しました]

グループの登録ポイントをその中心点にできるため、コーディングがはるかに簡単になります。

基準点は、スケール変換のスケーリング ポイントであり、回転の回転ポイントです。

基準点をグループの中心に設定する方法は次のとおりです。

  // set the group offset to the group’s centerpoint

  parentGroup.setOffset(parentGroup.getWidth()/2,parentGroup.getHeight()/2);

基準点を設定したら、通常どおり group.setScale と group.rotateDeg を使用します。

  // scale the group from its centerpoint

  parentGroup.setScale(parentGroup.getScale().x+0.10);

  // rotate the group at its centerpoint

  parentGroup.rotateDeg(30);

ここにコードとフィドルがあります： http://jsfiddle.net/m1erickson/XWW7Z/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>

<style>
body{ padding:15px; }
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
  height:400px;
}
</style>        
<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="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";

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

          parentGroup=new Kinetic.Group({
              x:image.width/2,
              y:image.height/2,
              width:image.width,
              height:image.height,
              draggable:true
          });
          parentGroup.setOffset(parentGroup.getWidth()/2,parentGroup.getHeight()/2);
          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);

          // this outline rect is just for illustration
          var boundingRect=new Kinetic.Rect({
              x:0,
              y:0,
              width:parentGroup.getWidth(),
              height:parentGroup.getHeight(),
              stroke:"black",
              strokeWidth:.75
          });
          parentGroup.add(boundingRect);

          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 registration point
          $("#larger").click(function(){
              parentGroup.setScale(parentGroup.getScale().x+0.10);
              layer.draw();
          });

          // scale down by +0.10 at parentGroup registration point
          $("#smaller").click(function(){
              parentGroup.setScale(parentGroup.getScale().x-0.10);
              layer.draw();
          });

          // rotate CW by 30 degrees at parentGroup registration point
          $("#rotateCW").click(function(){
              parentGroup.rotateDeg(30);
              layer.draw();
          });
          // rotate CCW by 30 degrees at parentGroup registration point
          $("#rotateCCW").click(function(){
              parentGroup.rotateDeg(-30);
              layer.draw();
          });

    } 


}); // end $(function(){});

</script>       
</head>

<body>
    <button id="larger">Larger</button>
    <button id="smaller">Smaller</button>
    <button id="rotateCW">Rotate clockwise</button>
    <button id="rotateCCW">Rotate CCW</button>
    <div id="container"></div>
</body>
</html>
于 2013-08-04T05:00:30.547 に答える