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.
Related
There is an effect of pointing to a special element of image with line.
See example of crocodile at http://snapsvg.io/.
When the image appears at first there is no any pointing with lines:
Then after scrolling appears lines with hints:
I know there is https://github.com/julianlloyd/scrollReveal.js and a lot of other js libraries for effect of appearing.
The question is how to make this lines, place them at the exact point on top of usual image (not SVG) and animate lines on scrolling?
Would be great to know the name of this approach/effect (what to google) and see reviews on good/bad experience, or js libraries.
Update: want to see resolved issue with image resizing and exact pointing,
In most cases, see example at http://www.sitmed.com.br/produto?id=2, image has fixed isze and is not scalable, this will not work for big or small screens.
I think it is possible to write scaling library in javascript, using svg/canvas or even plain div.
Otherewise points will jump on image scaling.
To make these lines and place them at exact position:
The easiest is to use canvas or svg. Here are a few links to do that.
Drawing lines on html page
Drawing arrows on an HTML page to visualize semantic links between textual spans
Placing the lines is easy if you're using canvas. If you are using images for lines, you can place these lines with respect to the big crocodile. Not a big deal.
Animate lines on scrolling
A good place to start with knowing about animations is to learn any animation framework. I would suggest Greensock Animation Platform(GSAP). It is open source and also well supported. They have good tutorials and docs for beginners. You can animate in a very abstract manner using GSAP. Rapheal.js is also good for animating svg images.
As for as scrolling is concerned, you can find many plugins including the one which is mentioned in the question.
Just use a parallax scrolling type js library such as Skrollr. It's very easy to just make the lines a div with a background color, and then as you scroll the page the div grows in length.
The effect you are describing makes me think you are looking for something like flow or organization chart "connectors" which anchor arrows in a chart to glue points on each element. In more general graphics terminology these are likely just known as "line anchor points" or something similar.
JointJS is a great charting/drawing library for HTML5 and SVG that could make what you are doing fairly easy to do, but a simpler "CSS only" might be all you need. If you are you really looking to animate the image then the more sophisticated javascript library approach might be worthwhile. JointJS uses Raphael and Backbone.js so you get a lot of power tools in the box.
You can use this library for drawing SVG lines, its quite configurable and well documented. You basically need to specify your "From" and "To" elements and a line will connect them for you.
Then you can play with the line's stroke-dasharray and stroke-dashoffset properties on scroll to achieve effect of the line being drawn.
More of SVG animation here
I have used this approach and its quite cool looking, hope this helps
I think the best way to implement this depends greatly on what animation you're going for. To reproduce something similar as in your example, you could just stack different images (one for the crocodile and one for each component). Then as you scroll, you could change the z-index of the crocodile and use css animation to "wobble" the size of the element you just revealed. Put all of the images in one div together, to make sure they scale together and align nicely and you're done.
But for something else the work might be completely different of surprisingly similar, I really don't think there's one solution that fits all needs, except if you want to use the canvas as already suggested, but that depends on the complexity of the graphics you want to reveal.
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 would want to allow user to draw semi-transparent basic shapes (rectangle, circle) with user defined text over an image. The basic idea is to have a map underneath and users could mark certain areas of from it. It has been a while since doing web development and I'm quite uncertain which approach would be the best. It should work even on older browsers.
Any help would be appreciated!
First, forget about old browsers, it's 2012 after all. You won't be able to draw circle without having such css properties as "border-radius".
Second, no matter what, you'll have to use javascript in order to do the "drawing". jQuery + jQuery UI would be great for that. It appears like you'd need at least following plugins:
Draggable - to drag your shapes around
Resizable - to resize shapes
Dialog - to put text into the shape (there must be a textarea within the dialog. After you fill textarea and click Ok text will be put into the shape).
There's another way to put text into shapes, but that'll require some serious development efforts.
Now, how to create shapes. There are couple of ways:
Button which you'll have to click and which will create a box with set parameters
Use boxer plugin
That's the gist of it.
Rendering of the saved shapes is quite a different thing and i believe it shouldn't be problematic. Just fetch data from DB and based on it's properties render shapes.
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.
I'm trying to implement some kind of very basic flow chart functionality in a div.
Basically I have some boxes which by default my be joined by a little AND bubble. If I click on the bubble it will change to an OR bubble which will result in the boxes (divs) splitting.
Not really to sure where to start on this any guidance much appreciated - eg links to something similar or advice in what to look into. I've attached a mockup to help explain what I mean.
Thanks as always SO
W
It should be pretty straightforward. Bind a click on the and/or button, which changes the CSS class of the lower box to a class which has a larger margin-top property and moves the background-position of the and/or image to show OR. You could use jQuery's toggle function for this, though I imagine you'll be storing the state in a separate data structure anyway.