I need functionality like Photoshop polygon selection tool in HTML 5. I tried using HTML5 Path properties and I can draw line on canvas but can't have logic to make that line join and make polygon selection.
You can handle clicks on the canvas and put the click coordinates in an array variable.
You can keep adding the points to path array until the path is complete. A path is complete when the user clicks on the first point after create 3 or more points.
You can use this application to draw your polygon and export it to give you the correct HTML and Javascript canvas statements to produce the polygon on a web page
canvimation
Related
Is there such a thing as an edit control (meaning a rectangle of text containing a caret and modify-able by user input) for THREE.js? If so, could somebody give me an example of its use? . and, if not, must this functionality be simulated through DOM/JavaScript?
There is no such control class in three.js. You probably want to work with plain HTML textarea elements. If you want to apply a 2D or 3D transformation to a DOM element, consider to include one of the CSS renderers of three.js into your project:
https://threejs.org/docs/index.html#examples/en/renderers/CSS2DRenderer
https://threejs.org/docs/index.html#examples/en/renderers/CSS3DRenderer
I have an issue on triggering mouse event on a svg.
I am using the library d3.js to handle some graphic tasks. Specifically, when I manually click on a position on the svg, d3 draws a red or blue (depending on the path I am clicking on) circle on it and then returns the d3.mouse coordinates of the click.
Now, suppose I have a set of coordinates and want to trigger programmatically click on the corresponding point on the svg, so that it draws a red or blue circle automatically. How can I achieve that?
I read many solutions here but none allows to click on specific coordinates (while I can easily click on a specific path, for example).
My ideal function would be:
var svgd3 = d3.select('svg#id_svg')
function d3click(x,y,svgd3){
//does the click on [x,y, x,y are relative coord. depending only svg viewBox
...
}
Any idea?
Thanks a lot!
I have two div on html page having id container1 and container2 i have created svg for each div and each svg contain circle, Now i want to connect two circle
Is it possible to connect two circle from two svg file on same page (cx,cy of both circle should genrate automatically)
My code snnipet..
Html
<div id="container1 " style="width:900px;height:800px;border:solid;"></div>
<div id="container2 " style="width:900px;height:100px;border:solid; margin-top: 25px;"></div>
created svg for container1 ,container2 using below code
var svg = d3.select("#"+id).append("svg")
.attr("width", $("#"+id).css("width"))
.attr("height",$("#"+id).css("height"));
and draw circle for each container using force layout
Now I want to connect these two circle using line
How is it possible ???
For your general question "how is it possible?", here is a general approach to get you started:
Super-impose a third, mostly transparent SVG over the whole page using absolute positioning. Draw the line inside this SVG.
Use .getScreenCTM() (get screen cumulative transformation matrix) to calculate the position of each circle on the page.
Use the same function to figure out the transformation from the screen to your overlay SVG, and multiply one screen CTM by the inverse of the other to get the net transformation so you can figure the start and end coordinates of your lines from the coordinates of your circles.
Add a listener to the web page as a whole for any re-layout events, and re-do the calculations above as necessary.
If all of that sounds too confusing, you might want to come up with an alternate web page design that puts all the graphics in one SVG. Or one which allows for a different way to indicate that elements are connected (same colour, or hover over one causes highlight on the other).
P.S. You might be able to use .getTransformToElement() to replace steps 2 and 3, but you'll want to test that out thoroughly. I've never tried using it to find the transformation between elements in different SVGs on the same web page.
Problem :
Trying to create a layout looking like this one below where each portion is clickable and has separate entity.
Tried solution and problems with it :
create arc with canvas. Have to add the arc with stroke. Stroke is not clickable. Tried hacks from other answers but they don't seem to work.
Click Event on a Stroke of the Shape(arc) doesn't work
Instead of drawing with arcs, how about this:
use Wedges instead of Arcs
Draw the 3 outside shapes as Wedges and put them on a layer#1.
Draw the 10 inside shapes as Wedges and put them on another layer#2 above layer#1.
Draw the center circle as a Circle and put it on another layer#3 above layer#1 & layer#2.
Attach on.(“click”) to each individual wedge.
Layering will give you the visual "nesting" effect your looking for.
Layering will give you proper click control over each wedge-piece.
I am trying to create a cube using three.js for a project. I need to add text to vertices and at different points inside the cube. Any idea how this can be done?
For some basic code examples of using Sprite objects in Three.js, check out:
http://stemkoski.github.com/Three.js/Sprites.html
And for an easy way to create images that contain text to use as your sprite textures, check out the sample code at:
http://stemkoski.github.com/Three.js/Texture-From-Canvas.html
I think a combination of these two ideas will achieve what you are looking to do.
If you want to have label-style texts, so that the text begins at a specific point, but is always oriented with the camera and easily readable no matter the camera position, you can use sprites. (example of canvas-created text label sprites: http://i.imgur.com/e9I68xD.jpg - here they are rendered on a separate pass to that they are never obscured by the scene but you can do it on the same pass)
If that's what you are looking for, I'd suggest first checking the Sprites examples, and learn to attach some static image as a sprite to correct position in the scene. After you get that working, you modify the code so that you generate the text to an image canvas using standard Javascript Canvas functions, and using that image as the sprite.