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.
Related
i want to program a 2D-sqare Gamefield. The gamefield shall consits of 9 subfields. The Gamefield shall be an Image, like an Spacefield or so. Here you can see the concept, and how it shall later look like (just a mockup :P)
Within this field i want to move a Object from one field to the other (vertical /horizontal) . But i don't know how i can realize that. I had think of an multidimensional array, but i don't know if this is the right way to do this. I need to know, at which pixel in the image the new field begins. But i think its no good idea to code that hard. I want to do this with Jquery, CSS and HTML. It shall become a very simple online game.
Qapla'
In game development these fields are usually called tiles.
It's perfectly fine to create a multidimensional array of Tiles.
Whether they hold their own position or if it's up to a separate renderer is up to your design.
Some links you might be interested in:
Tiles and tilemaps overview (though this uses a Canvas-element)
Using CSS transitions for smoothly moving from one Tile to the next (not as useful when using a Canvas)
jQuery animate if you don't like CSS transitions, you can make use of jQuery as well.
I'd recommend reading up on Tiles in game development first, there are tons of example implementations.
I have a cool project with three.js, and everything work as intended. It displays some mesh in different canvas, and there is my issue.
The project aimed to display many, many canvas, and each one have his own context, and it reach the deadly limit of 16 live webGL contexts. Since it's wanted to display more than that in a page, I'm searching to turn around this restriction, by disabling a context when it's not actually displayed on seen page. When the user will scroll, context will be disabled/enabled so I can put as many context as I want.
I've found this function : renderer.forceContextLoss() and with this one I can force the context disabling. But I didn't found anything to relaunch it. I manage to detect a loss of context, but not its restauration
If you got any idea of how I can achieve that, feel free to give me some tips.
Thanks in advance !
This has been covered elsewhere but the easiest way to make it appear like there are multiple canvases is to just use one instance of three.js, make it cover the entire window, put place holder divs where you want to draw things, and then use element.getClientBoundingRect to set the scissor and viewport for each scene you want to draw in each element
There's an example here.
Here's the answer in StackOverflow from which that sample originates
https://stackoverflow.com/a/30633132/128511
This will use far less memory than using multiple canvases, each of which would need it's own data, it's own shaders, etc...
Okay, so I'm finding a lot of answers that don't quite fit my need. Here is my scenario: I have an app in javascript/html/css. I have two independently rotatable overlayed elements (in this case both svg's) that both have elements that need to be clickable which move around their perimers with the rotation of the two elements. One layer has 7 clickable points, the other has 12 clickable points, and the two rotate to a given point based on onclick events that set a target degree for the rotation. Only the points (i.e. small transparent circles at the edge of a circular radius on each of the two svg's) need to be clickable. My problem is that whichever layer I put on top works, but the buttons on the other layer then stop working, apparently blocked by the other's background. I've tried messing with all sorts of pointer events and some other ideas on StackOverflow, but all end with the same result: one set of buttons doesn't work. They need to be on separate layers so the rotation will put them at the correct position as they rotate in real-time. Any ideas would be welcome. I am looking for an answer that requires no libraries (including jquery), however if it can be done with jquery, then it can be done without jquery-- if I can find out how. Ideas anyone?
#dandavis is pretty much right here, except I think he meant to say pointer-events: auto . Was just noting there's not an official 'answer' posted. For now, marking this one, but if you want to re-post as an 'answer', Dan, I will gladly mark it as the accepted one.
Before posting this question I did many tries and searched everywhere for alternatives, but I gave up and I'm asking here..
What is the easiest way to create an interactive map controlled by functions?
Here are details:
I have a div with fixed width/height, without a background, and I need to dynamically add things (images/text) inside of it, at any position, and they can also overlap each other if needed.
An example is better than thousand words:
- assuming the div is 500w 500h, I need to create an image at (200,200) with a size of 50x50
Here are the thousand words:
I tried with canvas, but it's too hard to remove something without touching the other things (for example if images #1 and #2 are overlapped and I want to delete the #1, I'll delete part of img #2 in the process. Of course the best thing would be to save things stored to when I need to delete something I can redraw all the rest, but it's a huge pain, if something easier exist would be better)
Tried also with http://leafletjs.com/index.html, but it seems too powerful to solve my problem, and I don't even know if it works without a background.
Maybe the best solution would be to use simple divs with good positioning, so I can change through functions their content easily, but I suck at div positioning.
Thank you to everyone that can help me :)
I really recommend the MapBox JavaScript API. It's a nifty utility that I have used in various instances. https://www.mapbox.com/blog/mapbox-javascript-api/ Extremely extendable API.
Is there an alternative (and more elegant!) method of creating multiple tooltips on top of an image without using image maps? Preferably looking for a solution that makes use of jQuery, but not necessary.
While I know solutions exist with image maps, they just seem so clunky and unmaintainable. For example, what if the image comes from a dynamic source? Would that source also have to provide an image map as well, which someone would then have to create beforehand? Maybe I'm asking for too much, but on the chance that someone out there has a more elegant solution to this, I'd be very grateful.
Thanks for you help!
I understand your question, but there are two few things that we cannot break from.
Your images might be loaded dynamically
Tool-tip areas can be points, boxes, or basically ANY shape (a set of coordinates that binds a region)
Because of #2, it's impossible but to use an image map. If, however, your tool-tip areas are restricted to points and boxes, then you can make do without creating an image map. This doesn't mean that the image source doesn't have to provide any information because that doesn't make sense, it just means that the source can provide a generic JSON object that talks about the image. Once the image reaches client side, you can call a function that you wrote to create an invisible div on top of your image and based on the data you've received, create small div regions that have mouseenter() bound to them. Even with this, it's not FAR from an image map.
I guess the point I'm trying to make is that you are not getting away from having to attach data to your image AND do some processing of that data once it reaches client side. This is because you're working with such an unrestricted environment of an image that can take on any shape with your regions taking on any shape.
I'm not sure if this answers your question in any way, but usually elegance comes from taking advantage of restrictions, which in this case there is practically nothing we can work with.