إنشاء خطوط أفقية في جوينتجس

Question

كيفية إنشاء خط أفقي في جوينتجس.أريد رسم خطوط أفقية بسيطة بين نقطتين في جس المشتركة .يمكن للشخص من فضلك قل لي كيف نفعل ذلك.

أوراقي تبدو مثل :

  var paper = new joint.dia.Paper({
        el: $('#myholder'),
        width: w,
        height:h,
        model: graph,
        gridsize:4
    });
    var paper2 = new joint.dia.Paper({
        el: $('#myimage'),
        width: w,
        height:600,
        model: graph,
        interactive : false
    });

ولقد خلق اثنين من خط أفقي مثل:

  var line = V('line', { x1: 50, y1: 100, x2: 300, y2: 100, stroke: 'black' });
    V(paper.viewport).append(line);
    V(paper2.viewport).append(line);

لكنني لا أحصل على الخط في الورق أثناء طباعة الخط في الورق 2

Answer 1

يمكنك استخدام رابط لذلك:

graph.addCell(new joint.dia.Link({
   source: { x: 50, y: 100 },
   target: { x: 300, y: 100 }
}))

أو سفغ:

var line = V('line', { x1: 50, y1: 100, x2: 300, y2: 100, stroke: 'black' });
V(paper.viewport).append(line);

V هو متغير عالمي تصديرها جوينتجس وهي مكتبة صغيرة لتسهيل التلاعب سفغ الذي يسمى فيكتوريزر (http://jointjs.com/api#v).

ضع في اعتبارك أنه إذا كنت تريد إضافة سطر آخر إلى الورقة الأخرى (paper2) ، يجب عليك أولا استنساخ أول واحد:

V(paper2.viewport).append(line.clone())

إذا لم تفعل ذلك ، فإن الخط من paper يؤخذ بها وإلحاق إلى paper2, ، لهذا السبب لا ترى الخط في paper بعد الآن.