My goal, draw a graph and then draw a new graph based on new input data
My solution so far, create a graph, add vertices and edges
and when I press clean I will do the following :
graph.removeCells(graph.getChildVertices(graph.getDefaultParent()));
graph.getModel().clear();
And then start adding new vertices and edges
but now the layout manager stops working
Related
I'm new to draw.io and mgraphx. I know how to create a shape 'programmatically' in draw.io using 'extras/create shape'
I'm wondering if it is possible to drag some basic shape to a diagram, 'merge' them to a single shape, then add some connection point and finally drag the new shape to a library.
I tried grouping the basic shapes but a group is not a shape in itself (it cannot have connections points, and it cannot be connected to other shapes, only the contained shapes can).
Is there a way to create a new shape 'diagrammatically' from basic shapes?
if not, ther are some examples that show how to do the merge of basic shapes using the mxgraph library ?
thankyou
It has been a few since a started playing with LibGDX.
Now I am tryin g to drag and drop bodies onto slots of the same shape:
E.g. Squares can only be dropped onto squares of the same size or bigger. The same for triangles and circles.
https://github.com/libgdx/libgdx/blob/master/tests/gdx-tests/src/com/badlogic/gdx/tests/DragAndDropTest.java
My point of start is the sample above, but I have no idea put everything together.
1 - What would be the easiest way to implement?
2 - Should I used Box2D and Physics Body Editor to create a polygon shape and use it in the drop method to test the dragged shape with the static shape?
3 - How to test the vertices/edges using Vector2 to see if its is bigger or not?
Hope I am on the right direction.
I'm new to Geotools. I am developing a simple application that shows a map and I would like to dynamically place a bitmap or vector symbol on it (for example to show where the current position is, like in navigation systems).
Now, what I've done already is:
showing a map given one or more shapefile.
center the map on the last inserted position.
add shapes to new layers when needed.
What I need to do is to create an overlay with images at given coordinates on the map area (to be clear, I don't want to generate a raster layer on disk, I just want to paint on the screen).
My guess is that I have to somehow directly use the Graphics2D instance inside JMapPane, is that correct? In this case how can I convert from the geographic coordinates to pixel coordinates on the drawing pane? Or are there some geotools functions/classes that I should be looking for?
Thank you.
Answering myself, since I found the solution.
I did it by extending class org.geotools.map.DirectLayer, which provides a way to define a custom layer by extending its draw(Graphics2D, MapContent) method. Graphic elements are placed at the correct coordinates by using the worldToScreen affine transform provided by geotools. For example, to define a Point2D placed at the current position given real-world coordinates:
AffineTransform worldToScreen = viewport.getWorldToScreen();
Point2D worldPoint = new Point2D.Double(currentPosition.x, currentPosition.y);
Point2D screenPoint = worldToScreen.transform(worldPoint, null);
Once the draw() method is defined, just instantiate and add as a layer to your MapContent instance.
I'm now working on a painting app. It uses a html canvas. Users can draw shapes on the canvas.
Now a problem comes to me. I want to select the line that I drew on the canvas. When it is selected, I can drag it or delete it. How can I implement it ? Any good ideas?
It might be worth your while to have a look at https://github.com/canvimation/canvimation.github.com this contains the source code for a drawing application using canvas.
You should note that this application is being re-coded but there is not yet a working version using the new code on line. The new source code is in the stage1 branch. Hopefully this new code is easier to understand than the old code and the code referred to below comes from the stage1 branch.
Basically a shape object is created for each shape drawn which includes all data about eh shape, including path data and data giving the rectangular boundary around the shape. When the "boundarydrop" div is clicked then function checkBoundary is called and data about the shift key and cursor position are passed. Then for each shape the first check is to see if the cursor is within the boundary of the shape and if so then a more refined check is carried out. For a closed shape the check is if the cursor in inside the shape and for an open shape if the cursor is close to the path.
There are further complications depending whether the shift key is held down or not and which group the shape belongs to. However the basics are there.
Functions to check out
in index.html
shiftdown
getPosition
in scripts/drawboundary.js
checkBoundary
isIn
isOn
in scripts/shape.js
shape
A working online version of the application is at http://canvimation.github.com/ but this uses the older code in the master branch and there are some bugs but it will give you some idea of what the application does.
Hope this is of some help
There is a library called kinetic.js, with it you can keep track of the shapes you draw on the canvas with the select feature.
Here is the link: https://github.com/ericdrowell/KineticJS
I've created a line chart in Flex using LogAxis. Flex draws minor tick marks at the same location as the major tick marks for a Log axis, so I need to manually draw the minor tick marks.
I'm new to Flex, I've tried to do this using a CartesianDataCanvas inside backgroundElements in mxml, then using ActionScript to draw lines on the data canvas using moveTo(x1,y1) and lineTo(x2,y2), which draws a line between (x1,y1) and (x2,y2).
The problem with the above method is the tick mark length is a function of the chart area (which depends on the browser window size).
What I need is a method that:
(1) starts at a data coordinate (e.g. moveTo(x1,y1) works fine for this)
(2) draws a line to a screen coordinate (e.g. lineTo(x_screen, y_screen) where x_screen and y_screen are screen coordinates).
Is there anything that can accomplish this in Flex/AS3?
Alternatively, could I use screen coordinates for both steps above? If so, how to convert between screen and data coordinates? For example, is the upper right corner of the screen always a fixed data coordinate that I could reference is creating such a conversion?
Alternatively, could I save a five-pixel line in Illustrator and simply paste that image in the chart somehow? If so, how to paste it exactly at a data coordinate?
Any ideas or comments much appreciated.
I'd suggest you to create your custom axis renderer. Extend AxisRenderer class, override updateDisplayList method. Since all methods responsible for rendering axis are private, just copy them to your class and make needed changes to drawTicks method. But you'll need to spend some time understanding rendering logic.
Then apply your renderer to your chart.
<mx:LineChart>
<mx:horizontalAxisRenderers>
<custom:CustomAxisRenderer/>
</mx:horizontalAxisRenderers>
</mx:LineChart>