ericdrowell / KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://www.kineticjs.com
3.98k stars 752 forks source link

toImage only captures what is viewable #965

Closed DigitalFlux closed 10 years ago

DigitalFlux commented 10 years ago

I have a layer which I would like to cache via toImage. Caching it works great for when all of the objects for the application are already in view, but for any objects that are either off-screen or partially off-screen, the parts that are not in view are clipped when the layer is cached. This becomes very apparent when you drag, and the half of the object that was off-screen is non-existent until mouseup restores the hidden layers with the actual objects. I tried using setClip() in the event that layer clipping defaulted to the size of the viewable window, to no avail (I am starting to think that the layers do not concern themselves with what is "outside" the stage bounds, even when specified, when you call toImage()).

Is this a limitation of toImage(), a bug, or am I just missing something to do before calling toImage() on a layer?

jfollas commented 10 years ago

toImage() relies on the same functionality in the undelying Canvas API. When it generates an image, only the visible parts are included (which makes sense, because that's all that is expected to be displayed to the user).

On Tue, Jul 1, 2014 at 12:19 PM, DigitalFlux notifications@github.com wrote:

I have a layer which I would like to cache via toImage. Caching it works great for when all of the objects for the application are already in view, but for any objects that are either off-screen or partially off-screen, the parts that are not in view are clipped when the layer is cached. This becomes very apparent when you drag, and the half of the object that was off-screen is non-existent until mouseup restores the hidden layers with the actual objects. I tried using setClip() in the event that layer clipping defaulted to the size of the viewable window, to no avail (I am starting to think that the layers do not concern themselves with what is "outside" the stage bounds, even when specified, when you call toImage()).

Is this a limitation of toImage(), a bug, or am I just missing something to do before calling toImage() on a layer?

— Reply to this email directly or view it on GitHub https://github.com/ericdrowell/KineticJS/issues/965.

DigitalFlux commented 10 years ago

Thanks for the quick response. I think my best course of action is to create a hidden element with a canvas that can be sized to what is needed and have toImage() called on it in order to get the caching done as needed.