Category : fabricjs

I have some circles that can be added to a fabricjs canvas. Each circle is an object, while outside my javascript code I have a DOM element, that looks like this: <span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;z-index:9999999;position:absolute;cursor:pointer;"> <div class="tooltipcontent darktext tooltippadding" style="position:relative;"> Testtest </div> </span> This element triggers a tooltip with Tippjs (a js tooltip ..

Read more

I need help plis… I donĀ“t know how i can parse this object to canvas in fabric.js enter image description here "{"type":"group","version":"4.3.1","originX":"left","originY":"top","left":416.995,"top":370.92,"width":69,"height":118.16,"fill":"rgba(0, 0, 0, 1)","stroke":"rgba(255, 255, 255, 0)","strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":true,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"f9d65447-b79d-446b-952f-1a13c588248f","name":"New group","link":{"enabled":false,"type":"resource","state":"new","dashboard":{}},"tooltip":{"enabled":true,"type":"resource","template":"{{message.name}}"},"animation":{"type":"none","loop":true,"autoplay":true,"duration":1000},"userProperty":{},"trigger":{"enabled":false,"type":"alarm","script":"return message.value > 0;","effect":"style"},"objects":[{"type":"textbox","version":"4.3.1","originX":"left","originY":"top","left":-34.5,"top":-59.08,"width":60,"height":36.16,"fill":"rgba(0, 0, 0, 1)","stroke":"rgba(255, 255, 255, 0)","strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":true,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"text":"a","fontSize":32,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"minWidth":20,"splitByGrapheme":false,"id":"f156eb72-b4dc-4f8d-b9a5-1cf625b8fb51","name":"New text","link":{"enabled":false,"type":"resource","state":"new","dashboard":{}},"tooltip":{"enabled":true,"type":"resource","template":"{{message.name}}"},"animation":{"type":"none","loop":true,"autoplay":true,"duration":1000},"userProperty":{},"trigger":{"enabled":false,"type":"alarm","script":"return message.value > 0;","effect":"style"},"editable":true,"styles":{}},{"type":"textbox","version":"4.3.1","originX":"left","originY":"top","left":-26.5,"top":21.92,"width":60,"height":36.16,"fill":"rgba(0, 0, 0, 1)","stroke":"rgba(255, 255, 255, 0)","strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":true,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"text":"b","fontSize":32,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"minWidth":20,"splitByGrapheme":false,"id":"c132d6b2-97f7-4599-b717-2f95355e4731","name":"New text","link":{"enabled":false,"type":"resource","state":"new","dashboard":{}},"tooltip":{"enabled":true,"type":"resource","template":"{{message.name}}"},"animation":{"type":"none","loop":true,"autoplay":true,"duration":1000},"userProperty":{},"trigger":{"enabled":false,"type":"alarm","script":"return message.value > ..

Read more