The thing is about a markup tool on canvas.
First, I could draw arrow, line or rectangle on canvas.
Then, I could select the things I drew on canvas. For example. if I click the arrow, it will show a dotted square around it to show that I have selected it.
At first, I thought I could put a div element around the arrow and hidden it. Then if I click the div element and show this element just look like I selected the arrow.
But I find out that I could not put other DOM element on canvas.
So there is anyone know how to do it?
Or anyone know some other ways to implement it?
It could be perform with js libraries. I tried some existing framework but didn't get a clue.
What about starting with something like this :
http://simonsarris.com/blog/140-canvas-moving-selectable-shapes
You also can take a look at existing frameworks like kineticJs
Related
I have a map which is a png file. I use getBoundingClientRect() with 2 div containers to check for overlapping divs througout my game. (Works fine to check for collison).
I was wondering if it's possible to outline a specific part of an image or wherever the transparency starts so I can then add a onclick event to that part of the div so the user cannot click outside of the map.
Hope this kind of makes sense.. If you need any more information let me know. Thanks
I think this is what you are looking for:
http://www.outsharked.com/imagemapster/
You add an area tag with the coords you need, then you can apply something over it. I recommend you this plugin since it's very powerful, easy to use.
I'm trying to do something that seems simple, but I just can't do it.
I want to have an image that can be zoomed in and out, probably in a canvas (this I can do it).
But, I want to be able to put annotations on this image, like annotations on a map. I could also do this, with an html list positioned on the image.
Problem is, I have no idea how to merge these two concept into one, I know I can't really put html in the canvas, so forget about the li there.
Example of what I would like to be able to do (this is done in flash): http://www.digitalwanderer.net/darksun/
Any one has any ideas of the way to go to reproduce something like that in html?
I just want to put an outline on a box I am hovering over. I remember seeing a tutorial on this before but now I can't seem to find anything on it. Any help would be greatly appreciated!
As far as I know there is no outline attribute for a 3d shape in x3d.
You could maybe do a trick by having two boxes, the second one (the bigger one, maybe different color) being the "outline" of the first one. I would put the two in a Switch node. On mouse over display the bigger one.
Or maybe another solution (easier) is to change the size parameter of your box. You can do this by routing a SFVec3f value to the scale of your box or by writing a bit of javascript code.
my link: http://dl.dropbox.com/u/7727742/playlistsite6/index5.html
I have a 3d cube using a variation of zachstronaut's demo
(link: http://www.zachstronaut.com/lab/galaxy-box/ ). It uses javascript, translate3d, scale3d, etc...
I've tried assigning different z-index values in the css file, but with no luck. I can access the objects outside the cube(you can see this with the hover effect), but not the objects inside the cube. I have a hunch it is because it's not doing a z-sort type of function like pre3d.js. I was wondering if anyone could offer some insight into where I should look for a solution.
Object coordinates are generated randomly, so you may have to refresh once or twice to get some objects that are inside the cube.
Thanks!
EDIT:
Only tested in safari and chrome dev
Webkit ignores z-indexes on anything that has translate3d defined, as it logically should. z-index is meant for a 2D world, it's like taking a bunch of paper and saying "this one is on top" -- you still have a flat surface. Unfortunately, if you want to be able to select one of the "stars" inside of your box, you're all but out of luck since you're using HTML nodes.
The normal way of doing this is using a click-map -- basically every object gets rendered twice. Once normally and once in a single color with no shading, etc. The 2nd rendering is never shown and is simply used to tell what the user clicked on. You get the color where they clicked and that color maps to a specific object. If you were using canvas, you would do it that way and just change the rendering order on the 2nd render.
Since you're using HTML nodes, you can't do that. You have a couple of options:
You can calculate which star is under the mouse on mouse-move based on viewport rotation and x/y/z position of the star
you can attempt the above method by overlaying an identical rendering without the cube and where the stars have a 0% opacity. Each star in your new rendering would map to a star in your existing one, and you'd have easy mouse-over detection.
Post the results! :)
First of all, I'm glad you found my demo interesting!
You're not going to have much luck trying to do a hover or capture a click event on objects inside of a 3D CSS3 cube for the exact same reason you wouldn't have much luck capturing a hover or click events on a div underneath another div... in HTML all the DOM events go to the top most DOM node. If one div overlaps another div, you can't click the one that is underneath. Everything inside the 3D cube is "underneath" another DOM node.
Things are further complicated because you're taking objects in 3D space and asking a user to interact with them on a 2D plane (the browser window) using a 2D input device (the mouse).
You could hide the faces of the cube so that they wouldn't block the user's clicks. You could do something like cwolves suggested.
Sorry I couldn't be more help... HTML kind of fails us a bit here. Welcome to the bleeding edge!
Generally speaking - is it possible to draw with javascript two diagonal lines inside of a specific div on a website? It should basically look like a placeholder image … e.g. http://wightwildflowers.com/assets/images/placeholder.png
I'm just curious. If it's possible how would it be done?
You could add tags for each specific div with the correct size to your DOM and link the image. It will be a bit distorted.
OTO you can also try to create a canvas over each such div and draw the lines there.
there isn't a good native way to do this. the only pure javascript solution is to build a 2d array of some html element (table cells or divs or whatever) and treat them as pixels, coloring specific cells.
providing/generating an image is probably a good alternative.
the next option is using something like raphaeljs to generate browser supported vector images. this should work fairly reliably but adds a lot of weight to your page to draw two lines.
Is it reasonable to dynamically add and size the placeholder image you just showed? That might be your best bet.
You could also try working with the canvas element.