KineticJS icon indicating copy to clipboard operation
KineticJS copied to clipboard

Cache a scaled stage/layer

Open Pe443 opened this issue 11 years ago • 1 comments

Could it be possible to use the cache methode after scaling an element.

In this example below you can see that the layer first is drawn, then scaled an then cached and this looks very distorted.

var stage = new Kinetic.Stage({ container: "canvas", width: 500, height: 200, });

var myLayer = new Kinetic.Layer(); myLayer.x(0); myLayer.y(0); myLayer.width(300); myLayer.height(200);

var simpleText = new Kinetic.Text({ x: 2, y: 10, text: 'Text', fontSize: 30, fontFamily: 'Calibri', fill: 'green' }); myLayer.add(simpleText);

myLayer.cache();

stage.add(myLayer) stage.scaleX(4); stage.scaleY(4); stage.draw();

Pe443 avatar Mar 04 '14 15:03 Pe443

I tried to cache group using .cache() method and was unable to cache it with scale. Here is an example: http://jsfiddle.net/qDPq8/1/. At the same time, I was able to cache just Rect with proper scale: http://jsfiddle.net/qDPq8/2/. Is it possible to solve this problem with current KineticJS? Looks like in #763 was suggestion to add quality param to cache settings.

iskiselev avatar Jun 19 '14 02:06 iskiselev