Let's say I just add a simple little image:
var image = scene.add.image(200,200,'simple-little-image.png');
Then later, I want to destory it. Not just hide it, but remove all of it's data and everything.
I checked the docs and the image class doesn't have any sort of kill or destroy function. However, it has an ignoreDestory boolean. Which makes me think the scene must remove it? But I cannot find a method for removing images in the scene class's docs.
And looking through the scene class in the console, I can't find any functions of it's children that would remove the image.
So, How do I remove the image and all of it's data?
While it doesn't have a kill(), an Image does in fact have a destroy() method.
You might already be aware, but just make sure you have access to the image variable where you want to destroy it.
Related
I am trying to do a paint app. But that's not all. I want to extend it with possibility of layers like in gimp or photoshop. Some of layers can be visible and others not. It all depends of user needs.
I tried a lot. There are some of my ideas how to do it:
First i tried to add new canvases to html document and changing z-index of elements. The problem of this was that addEventListener didn't know what i did. I mean that it didn't know on which layer i am actually pressing.
Second idea was to take of all points (vertices) of line, put it in array and then redraw it. It all will happen in area of one canvas element.
The last one and i think the best idea was to have multiple 2d contexts. But i don't know how to make it invisible. I saw only ctx.globalAlpha property but it needs to be configured before drawing.
Maybe someone knows what is actually the best method to achieve it. I will be very thankful for every response.
I have an image in Pixi.js, and I want to apply a filter to it. This is simple enough, but I want the filter to actually change the image, so that the next frame, what is rendered is a filtered filtered image, and so on. How do I create a Pixi object that renders to itself every frame?
I found this, which seems to be asking a similar question, but I cannot make sense of the code provided or the responses.
Try using the PIXI.RenderTexture class to create an in-memory image and render to it what you want. The render texture will preserve what you've rendered previously.
Here is an example that does that: http://pixijs.io/examples/#/demos/render-texture-demo.js
Here are the docs: http://pixijs.download/release/docs/PIXI.RenderTexture.html
Note: To preserve contents when rendering to a texture you need to tell PIXI to not to clear the texture before rendering to it. The below line is from the linked example and the false value does just that:
...
app.renderer.render(app.stage, renderTexture2, false);
...
I have a surface with some shapes. I use
dojox.gfx.utils.toJson(surface)
to generate a json from it, and then
dojox.gfx.utils.fromJson(surface, json)
to get the data and append it to the surface.
The problem comes when I create a moveable node. After saving it to json and then appending it to the surface, the node is no longer moveable. I found no way of making the node moveable again. Is there a way to do this?
I want to be able to save and load svg data in my page and after load, move the elements around. Using dojo seemed easy enough before i stumbled on this problem. If I can't do this easy, is there a better library I can use, to achieve my goal?
Edit: here is the actual code: http://pastebin.com/2qLCTw8B
I found the answer to my problem.
First of all, when you require a dojo module it is good to assign it to a variable, which i didn't know. This way when assigning the on module, you can use the on function, used to add event listener, anywhere in the code. From there it is easy to create a moveable node, when you click on it.
It seemed though that this is a useless operation, as you could just iterate over the surface - children array, and make every node moveable.
Here is the improved code: http://pastebin.com/wAvSnZpN
The code needed, if you decide to use events anyway:
function HandleMouseDown(e) {
var foo = new dojox.gfx.Moveable(e.gfxTarget);
}
on(surface, 'mousedown', HandleMouseDown);
I'm using the simile timeline widget to create a timeline and I need to add images to the timeline. The images will probably be positioned at the bottom of a "band" but chances are I'll have to set the "top" and "left" styles per image (we want to put images in some of the empty areas to make it look nicer).
I know I can change the "icon" of an event and that will set an image but it's always at the top of the band and the image gets in the way of other events and since these images are not technically events I don't think they should be a part of the events database (right now it's all in a Google Doc which makes changing the timeline really easy).
I've tried to add new divs to the timeline div by manapulating the DOM (jQuery, appendTo) but that never works . . . not sure if it's a z-index thing or what.
I've explored using a "decorator" and maybe making my own custom decorator but, well, it seems to me someone MUST have wanted this before and I'm missing something easy. Ideas?
I got it! Basically, I created my own "decorator". First, it came in handy to be able to add decorators after the initial render. I found this on the simile google group.
Timeline._Band.prototype.addDecorator = function(decorator) {
this._decorators.push(decorator);
decorator.initialize(this,this._timeline);
decorator.paint();
}
Then, looking at the Timeline source for decorators, I copied the code for Timeline.PointHighlightDecorator and made my own . . called Timeline.PointPicture for now.
Is there a way to "activate" an entire DOM to be draggable and resizable using jQuery UI? I then want to save the user's new positions in HTML5's data attribute to recreate the page later.
Imagine this same page you're looking at to be "activated" when you just hover, click, drag, and resize all the visible elements around (snapping would be super nice!). Any advice or idea on this?
Making literally every div/span as drag and droppable is non-sensable. What we has humans easily observe as a atomic "unit" (like the 'javascript' tag box) is not so obvious internally in the HTML structure. So you may have to do some thinking and decide what you want included in "everything" that becomes Drag and droppable. And at that point, you can just name all those elements with a "dd" class and use that.
Like Thr4wn said, if you give each element that should move a class, then you can give each member of that class a function that updates its location when it changes. I suggest using 960.gs as a grid to remember locations.
This way you can each objects classes as html5 data.
It's pretty simple, just do this :
$('*').draggable();
Not really sure why you would want to do this.
if you really want to you could use the $("*") selector. but I would not suggest it...