グループに追加する前にグループに画像を追加する必要がありますか？

私はKonvaJSの潜在的なバグを発見しています。それとも私がグループに追加する前にグループに画像を追加する必要がありますか？

1）層を作成し、

2）グループを作成し、ステージおよびレイヤに追加し、それを追加...機能についてはよく分からない

3）イメージ・ノードを作成します。グループに追加してください（画像がロードされるのを待ってから、グループに追加するのを待つKonva.Image.fromURLを使用して画像がロードされます）。

結果：画像は表示されません。

ただし、画像をグループに追加してからグループに追加すると、画像が表示されます。これは、グループのダイナミクスが消えるだけで画像を添付したい場合に問題になります。

トレイやプレートのコンセプトを作成しようとしています。ユーザがアイテムをプレート上に置くことができる場所。ユーザーがプレートをドラッグすると、交差するすべてのノードを含むグループが作成され、すべて一緒に移動されます。ドラッグ・エンドでは、すべてのオブジェクトをユーザーに戻します。

EDIT：私が経験していた問題は、私のコメントで述べたグループ座標と関係がありました。

は、「私はポジショニングがグループでどのように動作するかの最長時間のために、誤解だと思うコメント読む。jsfiddle.net/jusatx6s」

LL：あなたがレンダリングされたノードの位置を確認していることを確認しますがそれらは画面に表示されます。

出典

2017-05-17 visc

こんにちは。デモを作成できますか？ – lavrton

私は誤解していると思います。コメントを読む：https://jsfiddle.net/jusatx6s/ – visc

画像に（x、y）を設定している場合は、@ jefhaiと同じように、この問題を自分自身に当てはめることはできません。グループ内の要素の座標は、グループの原点がグループ内の一番左の要素の上端と左端であるため、混乱する可能性があります。（x、y）を0に設定して、あなたが得るものを見てください。 –

私はplunkrを作成し、あなたが言及した手順に従いました。すべてがうまくいきます。ここに私のコードです。

var width = window.innerWidth; 
var height = window.innerHeight; 
var stage = new Konva.Stage({ 
    container: 'container', 
    width: width, 
    height: height 
}); 
// 1. created layer added it to stage. 
var layer = new Konva.Layer(); 
stage.add(layer); 
// 2. created group added it to layer 
var group = new Konva.Group({ 
     x: 120, 
     y: 40, 
     rotation: 20 
}); 

layer.add(group); 
var src = 'https://konvajs.github.io/assets/yoda.jpg'; 
// 3. Create an Image node and add it to group 
Konva.Image.fromURL(src, function(yoda) { 
    console.log(yoda); 
    yoda.setAttrs({ 
    x: 50, 
    y: 50, 
    width: 106, 
    height: 118 
    }); 
    // 4. Add it to group. 
    group.add(yoda); 
    layer.batchDraw(); // It's required to draw changes. 
});

ここでは、再生するplnkrです。もし私が何かを見逃してしまったら、私に知らせてください。

出典

2017-05-21 04:27:31

'batchDraw（）;'とは何ですか？私は層の下のAPIドキュメントでそれを見つけることができません。 – visc

https://konvajs.github.io/docs/performance/Batch_Draw.html –

ありがとう、これは実際に私にとって本当に便利です。 – visc

OPの編集上の混乱を考慮して編集しました。

原則：

層は、ステージと同じ座標系を使用します。したがって、シェイプの位置を{X：10、y：20}に設定するのは、ステージの左上から10,20です。
グループに図形を追加する方法は異なりますが、グループx &のy位置を設定しない場合は、このことに気付かないでしょう。グループに追加されるシェイプの場合、シェイプの位置は親グループの位置に追加されます。

レイヤーとグループを使用した例です。金色の四角形は、レイヤー上にのみあります。グループは緑の矩形で示され、位置（60,50）に設定されています。赤い四角形は、色以外の金色の四角形のコピーです。それは赤と同じx &の位置を持ちますが、それはグループに追加されます。そして、その位置（5,5）がグループ位置（60,50）に加えられて、ステージ上の絶対位置を（65,55）として与える。

// add a stage 
 
var s = new Konva.Stage({ 
 
    container: 'container', 
 
    width: 400, 
 
    height: 400 
 
}); 
 

 
// add a layer   
 
var l = new Konva.Layer(); 
 
s.add(l); 
 

 
// Add a gold rect to the LAYER 
 
var gold = new Konva.Rect({stroke: 'gold', width: 40, height: 50, x: 5, y: 5}); 
 
l.add(gold); 
 

 
// add a group 
 
var g = new Konva.Group({x:60, y:50}); 
 
l.add(g); 
 

 
// Add a green rect to the LAYER then add to the group 
 
var green = new Konva.Rect({stroke: 'lime', width:100, height: 100, x: 0, y: 0}); 
 
g.add(green); 
 

 
// Add a red rect, same apparent co-ords as red, but this time to the group 
 
var red = new Konva.Rect({stroke: 'red', width: 40, height: 50, x: 5, y: 5}); 
 
g.add(red); 
 

 
var abspos = red.getAbsolutePosition(); 
 
var pos = red.position(); 
 
console.log('Abs position of red is (' + abspos.x + ', ' + abspos.y + ') but its co-ords are ' + '(' + pos.x + ', ' + pos.y + ')'); 
 
    l.draw(); // redraw the layer it all sits on.

#container { 
 
    border: 1px solid #ccc; 
 
}

<script src="https://cdn.rawgit.com/konvajs/konva/1.6.2/konva.min.js"></script> 
 

 

 
<body> 
 
    <div id="container"></div> 
 
</body>

出典

2017-05-23 11:33:25

ありがとうございました。私の問題は、グループの座標の仕組みに関連していました。私はそれを理解し、元の質問に編集しました。 – visc

@jefhai申し訳ありませんがそのコメントを見ましたが、あなたにそれを接続していません。グループとの最初の誤解もありました。ステージのサイズである目に見えない背景矩形をグループに追加して、ページに一致するグループ座標を与えました。 –

グループに追加する前にグループに画像を追加する必要がありますか？

答えて

関連する問題