51244

kineticjs group cache and layer draw is hiding kinetic arc shapes

Question:

I am creating a circle as a group of kinetic arcs. When I cache the group and subsequently call the draw function on the layer, three quarters of the circle are hidden. I think layer.draw may require an offset but really I'm only guessing. When I remove the fill, stroke or opacity from the arc or the object literal from the cache call then the full circle is displayed. <a href="http://jsfiddle.net/leydar/gm2FT/5/" rel="nofollow">http://jsfiddle.net/leydar/gm2FT/5/</a> Any insights gratefully received.

function createArc(n){ var arc = new Kinetic.Arc({ innerRadius: 30, outerRadius: 50, /* if I remove the fill, stroke or opacity the full wheel is correctly displayed */ fill: 'blue', stroke: 'black', opacity: 0.3, strokeWidth: 1, angle: 36, rotation: 36*n }); return arc; } function init() { var arc; var stage = new Kinetic.Stage({ container: 'container', width: 104, height: 104 }); var layer = new Kinetic.Layer(); var circle = new Kinetic.Group(); for(var i=0;i<10;i++) { arc = createArc(i); circle.add(arc); }; layer.add(circle); stage.add(layer); /* if I do not cache or do not call layer.draw() then again the wheel is correctly displayed */ circle.cache({ x: -52, y: -52, width: 104, height: 104, drawBorder: true }); layer.draw(); } init();

Stephen

Answer1:

This is a bug of KineticJS. You may use this workaround:

Kinetic.Arc.prototype._useBufferCanvas = function() { return false; };

<a href="http://jsfiddle.net/gm2FT/6/" rel="nofollow">http://jsfiddle.net/gm2FT/6/</a>

Recommend

  • Can we identify the date on which someone liked my page?
  • Get comments from facebook ads (marketing)
  • Why the first base class in parent list must be non-trait class?
  • Store Realm files in Google Drive App Folder?
  • Removing Any Non-Specified Characters from an Excel Spreadsheet using a Macro
  • D3.JS - how do I add gridlines to my pie chart
  • Windows Mercurial global keychain
  • Loop over JSON data to create d3 pie charts
  • disabling ARC for .h files iphonesdk
  • ASP.Net check if user is internal or external
  • Why can't I draw a complete circle with arc() in Three.js?
  • Android: Button background XML sometimes loses alpha when setting color filter
  • CSS animation do not work for svg in
  • Can I override some attribute of drawable shape?
  • Seemlessly layering transparent sprites in OpenGL ES
  • What's the benefit of the trailing apostrophe in character literals
  • SQL Server Nvarchar and Java prepared statement
  • Recreate Apple Watch fitness tracker ‘progress’ bar - gradient on CAShapeLayer stroke
  • WPF Animation doesn't run first time
  • How to avoid or stop multiple ajax request
  • Sort by a column in a union query in SqlAlchemy SQLite
  • css background images not always displayed
  • You tube videos are not playing
  • SAXReader not re-ecape characters
  • AJAX Html Editor Extender upload image appearing blank
  • print() is showing quotation marks in results
  • Make VS2015 use angular-cli ng at build time in a .NET project
  • Android fill_parent issue
  • Retrieving value from sql ExecuteScalar()
  • How to make a tree having multiple type of nodes and each node can have multiple child nodes in java
  • Get object from AWS S3 as a stream
  • How to convert from System.Drawing.Color to Excel.ColorFormat in C#? Change comment color
  • Window Size for Mac application
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • AT Commands to Send SMS not working in Windows 8.1
  • Matrix multiplication with MKL
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • How do I configure my settings file to work with unit tests?
  • Is it possible to post an object from jquery to bottle.py?
  • Conditional In-Line CSS for IE and Others?