I would like to face a problem for which I haven't seen a solution looking around in Internet. This is: I need to save the elements drawn by WEB users on a canvas space not as a flat image, but each one singularly. This in order to let the same user, or even other users, to modify every single element (drag-and-drop, erase, erase partially, ecc.) in a second moment. This should also help to eventually save a drawing history and restore it in next working sessions. All the examples I found were intended to save just a canvas flat image.
Update:
To better clarify: not necessary as layers, but for sure I thought to realize several different driving tools; a drawing element is the singular application/istance of a tool: a circle, a box, a added image, a straight line or even a free hand drawing that start from the moment of right button mouse click till it is released. Then the chance to save the elements state allowing to modify each one in a second moment.
You can't do this natively with canvas. You should look at using a third party library. Fabric is a library that was built to do what you want.
The base idea was to use convans as a container for vectorial shapes (triangles, squares, cirlces, etc.), manual drawn figures (see example http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/) and inserted images giving the chance to users to save/upload the content not as serialized image, but with each distinguished element in its original format in order to continue to work on them in a future work session.
Related
We currently use the model derivatives API to upload 3D models and later visualize them in a browser with the Autodesk Viewer v7 (previously Forge Viewer).
For different reasons we have been trying to hide and show parts of the model, but to do so in some cases we need to be able to hide geometric pieces of some elements while still being able to see the rest. For example if we had an element in gray (see image below) we would like to make the part of the element in red transparent.
I have looked into the Viewer API docs and there are functions that allow showing and hiding complete elements, but not cutting elements along a custom path.
While the docs mention the overlay functionality which enables us to add custom geometries by interacting with the THREE library that the Viewer runs on, drawing a copy of the whole model seems inefficient and prone to giving bad results.
Searching in SO I found that the THREE v71 library (which is the version the Viewer uses) has the possibility of occluding elements with the colorWrite option. See these links for reference:
three.js transparent object occlusion
Occlusion of real-world objects using three.js
I tried implementing something similar by using the colorWrite key when creating a new Three Material in an overlay, but nothing happens. This makes me think that either the Autodesk Viewer overwrites the render order (which makes sense) or openly ignores the colorWrite option. Does anyone know why and if there is a workaround for this? Or does anyone know if there is another way to cut an element that I'm not considering?
Please note that we have to do this with multiple elements at the same time and that reuploading the model periodically is not an option for us.
I got the following feedback:
The approach linked in the SO thread doesn't work, because we ignore both the colorWrite material property and the renderOrder mesh property. I also think that the approach would not work as expected in general, because using an invisible object to occlude a part of another object would always be view-dependent, and also occlude other objects in the background (so it wouldn't just 'cut out' a part of a single object).
Generally, this is not really a use-case for LMV, because it's a viewing tool, not a solid modelling tool.
Cut planes might help to get some of what you want, but they also have limitations:
It's possible to define multiple section planes to construct a 'shape' (that's also what the section box does internally). But since they are infinite, you wouldn't be able to cut away parts of one object, but not other objects (or other parts of the same object that intersect the cutplane). They're also designed to be 'outward' facing. The section box, for example, can only be used to narrow the scene down to some elements of interest. It's not possible to do the opposite, i.e. cut out some inner part of the design and keep everything around it.
This is what the section box could offer:
I am using Plotly with Python 3.11 in order to create some html files that contain a 3D animation of a surface and a set of points.
Since it is important to me to see the geometric relation between this set of points and the surface, having that picture as an html file instead of a static format is of great value to me, because I can move around the image to see better how those points relate to the surface.
Now, those points I was talking about are particles in motion: they have a trajectory, therefore I can capture an html of the situation at every time, but as in separate html files. In that sense, I would find extremely useful to create an animation out of those html, so that I can decide when to stop the motion to see the position in case something interesting happens.
Does anyone know if such a thing would be possible to do? I have been searching around and the most information that I get is for "static" animations, meaning that I cannot "move" in a given frame.
Thank you in advance!!
I'm currently working on a pure html 5 canvas implementation of the "flying tag cloud sphere", which many of you have undoubtedly seen as a flash object in some pages.
The tags are drawn fine, and the performance is satisfactory, but there's one thing in the canvas element that's kind of breaking this idea: you can't identify the objects that you've drawn on a canvas, as it's just a simple flat "image"..
What I have to do in this case is catch the click event, and try to "guess" which element was clicked. So I have to have some kind of matrix, which stores a link to a tag object for each pixel on the canvas, AND I have to update this matrix on every redraw. Now this sounds incredibly inefficient, and before I even start trying to implement this, I want to ask the community - is there some "well known" algorithm that would help me in this case? Or maybe I'm just missing something, and the answer is right behind the corner? :)
This is called the point location problem, and it's one of the basic topics in computational geometry. There are a lot of methods you could use that would be much faster than the approach you're thinking of, but the details depend on what exactly you want to accomplish.
For example, each text string is contained in a bounding box. Do you just want to test whether the user clicked somewhere in that box? Then simply store the minimum and maximum coordinates of each rendered string, and test the point against each bounding box to see if it's contained in that range. If you have a large number of points to test, you can build any number of data structures to speed this up (e.g. R-trees), but for a single point the overhead of constructing such a structure probably isn't worthwhile.
If you care about whether the point actually falls within the opaque area of the stroked characters, the problem is slightly trickier. One solution would be to use the bounding box approach to first eliminate most of the possibilities, and then render the remaining strings one at a time to an offscreen buffer, checking each time to see if the target point has been touched.
I'm creating a space game in actionscript/flex 3 (flash). The world is infinitely big, because there are no maps. For this to work I need to dynamically (programatically) render the background, which has to look like open space.
To make the world feel real and to make certain places look different than others, I must be able to add filters such as colour differences and maybe even a misty kind of transformation - these would then be randomly added and changed.
The player is able to "scroll" the "map" by flying to the sides of the screen, so that a certain part of the world is only visible at once but the player is able to go anywhere. The scrolling works by moving all objects except for the player in the opposite direction, making it look like it was the player that moved into that direction. The background also needs to be moved, but has to be different on the new discovered terrain (dynamically created).
Now my question is how I would do something like this, what kind of things do I need to use and how do I implement them? Performance also needs to be taken into account, as many more objects will be in the game.
You should only have views for objects that are within the visible area. You might want to use a quad tree for that.
The background should maybe be composed of a set of tiles, that you can repeat more or less randomly (do you really need a background, actually? wouldn't having some particles be enough?). Use the same technique here you use for the objects.
So in the end, you wind up having a model for objects and tiles or particles (that you would generate in the beginning). This way, you will only add a few floats (you can achieve additional performance, if you do not calculate positions of objects, that are FAR away. The quad tree should help you with that, but I think this shouldn't be necessary) If an object having a view leaves the stage, free the view, and use the quad tree to check, if new objects appear.
If you use a lot of objects/particles, consider using an object pool. If objects only move, and are not rotated/scaled, consider using DisplayObject::cacheAsBitmap.
I'm thinking of making an application where at some points a graph is displayed that maps people over time and space. The vertical access is location, the horizontal access is time, and each person is identified by a line. At any point where the person did something of significance, there is a bigger dot on their line. Conceptually, clicking the dot brings up data about that particular dot, but clicking anywhere else on the line brings you to a detail on that person. Hypothetically, when you hover over the line the line should change color, and when you hover over a dot, just the dot should change color.
I know that I could do this pretty easily with flash, but I was wondering if these days there is any way to do this using only html and javascript. Is it possible? (Compatibility is not an issue, the only machine I am targeting is my own.)
Thanks!
You can do this with canvas, but it might be simpler to use SVG.
Since SVG uses DOM, you get builtin methods for handling events like clicking etc., instead of having to write your own handling code like you would need with canvas.
There are a few libraries that make working with SVG simpler and cross-browser compatible, such as Raphael and Dojo's dojox.gfx library.
You could create the dots as overlaid divs, so you can easily handle clicks etc. You'd have to sort out positioning quite neatly, of course.
However, highlighting the line will involve calculating the point-to-line distance manually and redrawing.