dinamik olarak oluşturulan zaman Bağlayıcı Stil jsPlumb konektörüne uygulanmadığını

Question

Güncelleme - İşte 1

my JSFiddle olduğunu.

Bu örnekte. DOM yüküne ilk iki div bağladım. kod

JSPlumb

jsPlumb.connect 
      (
       { 
        source: 'A', 
        target: 'B', 
        anchors: ["RightMiddle", "LeftMiddle"], 
        paintStyle: { strokeStyle: "#ff9696", lineWidth: 8 }, 
        connector: ["Flowchart", { curviness: 63}], 
        connectorStyle: [{ 
         lineWidth: 3, 
         strokeStyle: "#5b9ada" 
        }], 
        hoverPaintStyle: { strokeStyle: "#2e2aF8", lineWidth: 8 } 
       } 
      ); 

Ben Bağlayıcı Stili geçirerek bu doğrultusunda

.

Sorgu - Kaynak ve hedef uç noktalarını Yeşil ve Ping olarak göstermek istiyorum. Şu anda mavi gösteriyor.

Orjinal

Geçenlerde bir gelişme diğer bazı geliştirici tarafından eksik bıraktı devraldı. Projede 2 eleman arasında bağlayıcılar çizebilmemiz gerekiyor. Bunun için orijinal geliştirici jsPlumb kullanılır. El ile bir bağlayıcı oluşturduğumda kitaplık iyi çalışıyor ve sonuçlar üretiyor. Ama şimdi yapmak istediğim, dinamik olarak bir bağlayıcı oluşturmak. JsPlumb's documentation'u okumaya çalıştım, ancak istediğim sonuçları üretmiyor.

Bu benim (hedef elemanı olarak renk ve ok fark)

elle oluştururken bunun ne kadar olduğu Ama bunu otomatik olarak oluşturursanız bu renk ve ok alamadım. Bu, test için oluşturduğum fiddle. Yaptığım şey, jsPlumb.connect();'u çağırıp parametreleri iletmektir.

jsPlumb.connect({ 
    source: "page-1", 
    target: "page-2", 
    anchors: [ 
     [1.06, 0.5, 0, 1], 
     [-0.06, 0.5, 0, 0] 
    ], 
    endpoint: ["Dot", { 
     radius: 4 
    }], 
    endpointStyle: { 
     fillStyle: "#5b9ada" 
    }, 
    setDragAllowedWhenFull: true, 
    paintStyle: { 
     fillStyle: "#5b9ada", 
     lineWidth: 5 
    }, 
    connector: ["Straight"], 
    connectorStyle: [{ 
     lineWidth: 3, 
     strokeStyle: "#5b9ada" 
    }], 
    connectorOverlays: [ 
     ["Arrow", { 
      width: 10, 
      length: 10, 
      foldback: 1, 
      location: 1, 
      id: "arrow" 
     }] 
    ] 
}); 

kimse hata nerede işaret edebilir? jsPlumb belgelerine yana

Selamlar

Jehanzeb Malik

Answer 1

Bahse konu bu tür stackoverflow aşmadan daha sık gelip etmediğini tür şaşırıyorum, imho bir felaket. İşte ne oldu:

paintStyle.fillStyle artık etrafta görünmüyor ... demoların hiçbiri kullanılmıyor, ancak paintStyle bir connect-call içinde tanımlandığında belgelere yine de değiniyor. Garip ama StroytStyle işi mükemmel yapıyor. Ben (hatta o duruşu değiştirirseniz olsa, her şey çalışır) bunun ötesinde önermek hangi

paintStyle: { 
     strokeStyle: "#5b9ada", 
     lineWidth: 3 
    }, 

jsPlumb üzerinde jsPlumb aramak.

jsPlumb.bind("ready", function() { // your connection code here... }); 

güncellenmiş keman Bkz hazır: http://jsfiddle.net/p42Zr/5/

DÜZENLEME:

soru i fark etmedi sayfası ve benim cevap, yükleme arasında değişmiştir. Buraya kadar cevap ORİJİNAL ile ilgilidir.

Diğer kemanın problemi biraz farklıdır, ne olur ki jsPlumb önceden tanımlanmış olanların üstüne yeni Bitiş Noktaları oluşturur. Bunu değiştirmenin iki yolu var. Uç noktaları var myendpoint = jsPlumb.addEndpoint(...)'dan alın ve daha sonra bunları bağlamak için bu değişkeni kullanın. Bu durumda daha kolay yolu, seçeneklere endpoint: ["Blank"] eklemektir. (EDIT) Bitiş Noktası Stili'nin "Boş" olarak ayarlanması, uç noktaların çizilemeyeceği anlamına gelir; bu, bir bağlantıya ve daha önce tanımlanan iki son noktaya, (/ EDIT). http://jsfiddle.net/XbcZv/1/

yorumlarında geldi bir soruya cevap vermek için DÜZENLEME:: Nasıl bağlantılarda işaretçi-imleç gösterebilir güncellenmiş keman görüyor musunuz?

Basitçe ekleyin:

._jsPlumb_connector { 
    cursor: pointer; 
} 

/DÜZENLEME sizin css için. Bitiş Noktalarındaki css değişiklikleri için _ssPlumb_endpoint css sınıfını düzenleyin.

Answer 2

Bitiş noktasının stilini ayarlamak sorunu çözebilir.

Bitiş noktasının bağlacıStyle bir önceliklidir. Yani bitiş noktasını connectorStyle ayarladıysanız, konektörünüzün boya tarzı çalışmayacaktır. connector.js içinde

jsplumb seti boya stili kaynak kodu:

 this.setPaintStyle(this.endpoints[0].connectorStyle || 
         this.endpoints[1].connectorStyle || 
         params.paintStyle || 
         _jsPlumb.Defaults.PaintStyle || 
         jsPlumb.Defaults.PaintStyle, true);