1

Kineticjs ライブラリで遊んでいます。キャンバスの追加、シェイプの作成、ドラッグ アンド ドロップに成功しました。

ページの html コンテンツを形状にバインドまたはラップして、同じ方法でドラッグできるようにしたいのですが、html/css/jquery のインタラクティブな機能を保持したままです (したがって、html を次のようにキャッシュしません)。ビットマップ、私はそれについて考えました）。

おそらくIDセレクターを使用して、それを行う方法がわかりませんか？

私は間違ったアプローチをしていますか?おそらく同じ結果を達成するためのより簡単な方法がありますか?

ヒント、アドバイス、または解決策を感謝します。

4

1 に答える 1

0

OK、もう少し遊んだ後、DOM を使用する方法を探すのをあきらめ、代わりに kineticjs の組み込みの text および image オブジェクトを使用して、最初に html/css で作成したものを再作成しました。少し長い道のりです。短い方法があるかどうかを確認したいと思います。

// Create the Stage

var stage = new Kinetic.Stage({
    container: 'container-kinetic',
    width: 1024,
    height: 768
  });

// Start Steve  

// Create the layer
  var layer = new Kinetic.Layer();
  // var rectX = stage.getWidth() / 2 - 50;
  // var rectY = stage.getHeight() / 2 - 25;

 // create the group
var group = new Kinetic.Group({
    x: -365,
    y: -275,
    draggable: true
   });

// circle border for object
  var circ = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 43,
    fill: '#fff',
    stroke: '#cccccc',
    strokeWidth: 1,
  });

   // this isn't doing anything - remove in cleanup
    var steve = new Kinetic.Image({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      image: steve,
      width: 81,
      height: 81,
    });

 // add the object title 
   var titleText = new Kinetic.Text({
    x: stage.getWidth() / 2 - 70,
    y: stage.getHeight() / 2 + 55,
    text: 'Steve Schofield - Founder',
    fontSize: 10,
    fontFamily: 'Maven Pro',
    textFill: '#252525'
  });

// add the object image
   var imageObj = new Image();
  imageObj.onload = function() {
    var yoda = new Kinetic.Image({
     x: stage.getWidth() / 2 - 41,
    y: stage.getHeight() / 2 - 41,
      image: imageObj,
      width: 81,
      height: 81
    });

    // add the shape to the layer
    group.add(yoda);

    // add the layer to the stage
    stage.add(layer);
  };
  imageObj.src = 'img/team_1_p3.png';

 // add the facebook icon
 var imageObjfb = new Image();
  imageObjfb.onload = function() {
    var fbIcon = new Kinetic.Image({
     x: stage.getWidth() / 2 - 26,
    y: stage.getHeight() / 2 + 82,
      image: imageObjfb,
      width: 8,
      height: 12
    });

    // add the shape to the layer
    group.add(fbIcon);

    // add the layer to the stage
    stage.add(layer);
  };
  imageObjfb.src = 'img/facebook_icon_small.png';

   // add the twitter icon
 var imageObjtwitter = new Image();
  imageObjtwitter.onload = function() {
    var twitterIcon = new Kinetic.Image({
     x: stage.getWidth() / 2 - 12,
    y: stage.getHeight() / 2 + 84,
      image: imageObjtwitter,
      width: 12,
      height: 10
    });

    // add the shape to the layer
    group.add(twitterIcon);

    // add the layer to the stage
    stage.add(layer);
  };
  imageObjtwitter.src = 'img/twitter_icon_small.png';

   // add the linkedin icon
 var imageObjli = new Image();
  imageObjli.onload = function() {
    var liIcon = new Kinetic.Image({
     x: stage.getWidth() / 2 - -4,
    y: stage.getHeight() / 2 + 82,
      image: imageObjli,
      width: 11,
      height: 12
    });

    // add the shape to the layer
    group.add(liIcon);

    // add the layer to the stage
    stage.add(layer);
  };
  imageObjli.src = 'img/linkedin_icon_small.png';

  // add the rss icon
 var imageObjrss = new Image();
  imageObjrss.onload = function() {
    var rssIcon = new Kinetic.Image({
     x: stage.getWidth() / 2 + 20,
    y: stage.getHeight() / 2 + 83,
      image: imageObjrss,
      width: 12,
      height: 11
    });

    // add the shape to the layer
    group.add(rssIcon);

    // add the layer to the stage
    stage.add(layer);
  };
  imageObjrss.src = 'img/rss_icon_small.png';

  // add cursor styling
  group.on('mouseover', function() {
    document.body.style.cursor = 'pointer';
  });
 group.on('mouseout', function() {
    document.body.style.cursor = 'default';
  });

  // add the shape to the layer
  group.add(circ);
  group.add(steve);
  group.add(titleText);
  layer.add(group);

  // add the layer to the stage
  stage.add(layer);

  steve.src = 'http://braindu.studiophp.net/investors.braindu/img/team_1_p3.png';  // end Steve
于 2012-12-18T01:18:10.550 に答える