I am working with a Javascript project and I want to draw a line with arrow and easily rotate in any direction. I prefer HTML4 instead of HTML5.
So can any one tell me the solution?
what i want is in this link .... but not in HTML5 but in HTML4
http://deepliquid.com/projects/blog/arrows2.html
If you just care about animation (and maybe keyboard control), canvas is faster. If you want dynamic interaction (e.g., the ability to click on the line, arrow, etc.), then SVG is best. SVGWeb and ExplorerCanvas offer some compatibility with IE for both of these...
I asked almost the same and ended up using Raphael (after the first 2 version)
If instead of an arrow, a line is enough, please look at:
How to draw a line between draggable and droppable?
demo:
http://www.balexandre.com/jQuery/draganddrop/testing_DragAndDrop.htm
if you really need to draw an arrow at the end, you can append the arrow object to the code, if you need help on this, let me know.
Related
By default konva-transformer use little rectangles in the middle of the border (middle-left, middle-right, top-center, bottom-center) . But i want to change resize by borders, like that
Is there any library that solves my problem or an easy way to implement it?
Look at the example, you just need to update the logic in the Transformer class
codesandbox.io/s/he5jq?file=/src/index.js
First off, have you considered how this will work for users that are using a touch-based interface, where there is no realistic potential for a mouseover event?
As an alternative, you could switch off the corner handles (as shown in your image) and switch on only the edge handles. There is a demo here that shows all the config options for the transformer which may be of assistance, more explanation here.
// set handlers on edges only.
transformer.enabledAnchors(['top-center', 'middle-right', 'middle-left', 'bottom-center',]);
To answer your question specifically, there is nothing in Konva.js to do this for you. You would have to develop it for yourself unless someone else can provide sample code.
The way to approach it would be to draw four lines (not a rect, four individual line shapes) around the selected shapes and use the mouseover & mouseout events to give you the necessary info to show / hide the cursor, etc.
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.
I want to make a simple html page with just a single image on it. Then make this image become pinchable.
I want to rotate it and zoom it in and out.
It may snap back to its original position when I release it.
i need code snippets that don't use any existing Javascript libraries for this – no jQuery, no Zepto, etc... it only needs to work in webkit-based browsers, but it MUST work on iOS.
Any recommandation or Key words that could be helpful to start with are appreciated.
You will need to figure out how to program the pinches yourself, but touches are a standard HTML5 thing now. See here for info on getting the touches information:
http://www.html5rocks.com/en/mobile/touch/
I have a canvas in which I need to draw text on in javascript, and then test whether given points overlap the text.
I am wondering if this is possible using the canvas (context.fillText(...)) and then some kind of test (if (overlap(textobject, {x:12, y:10{}) ) or whether I will need to draw the characters in SVG so I have the co-ordinates and can sort it from there?
I'm sure there are libraries out there that have started to pop up for this kind of thing but am having trouble with my google skills today.
I could think of a couple ways around this unless you are needing the text to be drawn to canvas for some type of pixel manipulation...
One way is float the text over the canvas element (position: absolute;) then test a hover event with jQuery. Another way is to create a box around the text in your canvas element, then detect when the mouse is within those bounds.
If you are looking for the most accurate test, svg would be the way to go.
You might also try out a library and see if they have already created this functionality. easel js
Update: Being an open web fan and OOMG HTML5, I had completely ignored Flash. Turns out that it is the best medium for what i'm trying to do. And as actionscript and JS are so similar, the logic was a copy paste job.
Thanks heaps for the answers, it ended up being a huge ask, so I drew my characters in Illustrator, turned on the grid, created an array of where the grid crossed the character and where it didn't - and then turned that into a JS array. I'll publish a link once it's finished.
I would like to create a spinning menu akin to the one done in flash here. Are there any relevant links you know about to help with this endeavor?
Thank you kindly.
You can do it with a series of images and just swap them. Without getting into complexities of cross-browser canvas/svg that's probably the easiest way to do it.
You could use the <canvas> tag.
You could make a circular image map with the mouseovers, and then use css rotates with animation on the angle in something like jQuery so that the currently selected item is at the top. However, this would be limited in the amount of browsers that support it (mozilla and webkit). I think there is a similar thing in IE, but requires an ActiveX overlay