Does mxGraph have a specific polyline object? That is, an edge that goes through a number of points. At the moment I'm faking it using multiple straight edges linked by invisible vertices, but this messes up the graph structure.
Waypoints can be added to edges in mxGeometry.points. To change them you need to clone any existing geometry object (in-place changes cause undo problems):
var geometry = model.getGeometry(edge);
geometry = geometry.clone();
geometry.points = points;
Assuming edge is the edge object to alter and points is an array of mxPoint.
The terminal points for dangling edges can be changed via mxGeometry.setTerminalPoint(mxPoint, boolean).
Related
I have to use OpenLayers to create a logic that draws two Features.
After the user draws Feature A,
We need logic to draw Feature B that surrounds the Feature A outside.
Draw Feature A on a map.
After Feature A is drawn, the system must create Feature B that surrounds Feature A.
The final result should be the same as Image.
PRECONDITION
Feature can have 3 - 6 angles.
The length of each side is unpredictable.
The angle of each side is unpredictable.
All sides of Feature B must be made from all sides of Feature A with the distance specified by the user.
How do we solve this problem?
full source code : https://github.com/JeahaOh/OpenLayersStudy/tree/master/Examples/EffectiveRange/CDN
Hey this looks like creating a geometry with a buffer of x (x is defined by the user).
You can use JSTS to create buffers from a geometry and then map it back to an openlayer geometry.
OpenLayers example that draws geometries with a buffer. This example uses LineString geometries but you can use any geometry.
Looking at your example you probably want sharp edges on your outer geometry so you can use a mitre line join style
var bufParams = new jsts.operation.buffer.BufferParameters();
bufParams.setJoinStyle(
jsts.operation.buffer.BufferParameters.JOIN_MITRE)
var outer = inner.buffer(spacing, bufParams);
See docs for BufferParameters for more options.
Here is a jsfiddle that shows it.
I need to build a simple online map editor and I'm intended to use leaflet (but can eventually use openlayers). How can I draw graph elements (nodes and edges) in leaflet (on top of a map). Specifically, I can draw linestrings (edges) and circles (nodes), but they are not correlated in any way, that is, the linestring is not an edge of the point since they are two different geometries. Hence, how can I draw graph elements, nodes and edges, where edges and nodes are associeted.
Example:
Here, the circles should represent a node, while the polylines are the edges. However, the two geometries are not associated in any way, that is, I can't associate the edges with the nodes. What I want to know is how to draw a graph on top of such mach where I can add, retrieve, delete edges and nodes.
I'm not sure why you don't want to directly create a polyline, but you can implement your request as follows:
// the given points array
let points = [
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
];
// iterate through the points to dynamically create the elements
for(let i = 0; i < points.length; i++)
{
// every point creates a circle (node)
L.circle(points[i], {radius: 20}).addTo(mymap)
// every pair of adjacent points creates an edge,
// other logic can be implemented
if(i + 1 < points.length){
L.polyline([points[i], points[i+1]]).addTo(mymap);
}
};
The resulted looks like that:
If you still want a whole polyline, without nodes and edges separation, please use L.polyline like so:
// create a polyline from an array of points
let polyline = L.polyline(points).addTo(map);
You can find some further reading on the different options of polylines and circles here and here.
A possible API for a graph format like you asked, for add, retrieve and delete nodes and edges elements, can be as follows:
// points represented by circles
function addNode(lat, lng){
L.circle([lat, lng], {radius: 20}).addTo(mymap);
}
function deleteNode(node){
node.remove();
}
function retrieveNode(node){
let latlng = node.getLatLng();
return [latlng.lat, latlng.lng];
}
// edges represented by polylines
function addEdge(nodeA, nodeB){
L.polyline([retrieveNode(nodeA), retrieveNode(nodeB)]).addTo(mymap);
}
function deleteEdge(edge){
edge.remove();
}
function retrieveEdge(edge)
{
let line = edge.getLatLngs();
return [[line[0].lat, line[0].lng], [line[1].lat, line[1].lng]];
}
By adding a Graph class, you can continue this direction, and further abstract your map building.
In Three.js I could use:
myObject.geometry.vertices[i].y += 12;
but in A-Frame nothing is even visible in console.log.
I had seen where between 0.2.0 and 0.3.0 everything
defaults to to buffer geometry and vertices were hidden.
Overriding this was possible, but now in 0.5.0 not even
the geometry array is listed in console.log.
console.log(myObject.geoetry); //now returns 'undefined'.
console.log(myObject); //returns the markup only, no array!?
Is there currently a way to address individual vertices to change their positions?
Set geometry="buffer: false".
https://aframe.io/docs/0.5.0/components/geometry.html#base_properties_buffer
Then get the geometry:
el.getObject3D('mesh').geometry
Im a newbie in 3D computer graphics and seen an odd thing.
I used the XTK-Toolkit, witch is great with DICOM. I add a cube in the scene and translated it far from the center (http://jsfiddle.net/64L47wtd/2/).
when the cube rotate it looks like it is moving
Is this a bug in XTK, or an principle problem with 3D rendering?
window.onload = function() {
// create and initialize a 3D renderer
var r = new X.renderer3D();
r.init();
// create a cube
cube = new X.cube();
// skin it..
cube.texture.file = 'http://x.babymri.org/?xtk.png';
cube.transform.translateX(250);
cube.transform.translateY(200);
cube.transform.translateX(270);
r.add(cube); // add the cube to the renderer
r.render(); // ..and render it
// add some animation
r.onRender = function() {
// rotation by 1 degree in X and Y directions
cube.transform.rotateX(1);
cube.transform.rotateY(1);
};
};
You miss to consider the cube a compound object consisting of several vertices, edges and/or faces. As a compound object it's using local coordinate system consisting of axes X, Y, Z. The actual cube is described internally using coordinates for vertices related to that cube-local coordinate system.
By "translating" you declare those relative coordinates of vertices being adjusted prior to applying inside that local coordinate system. Rotation is then still working on the axes of that local coordinate system.
Thus, this isn't an error of X toolkit.
You might need to put the cube into another (probably fully transparent) container object to translate/move it, but keep rotating the cube itself.
I tried to extend your fiddle accordingly but didn't succeed at all. Taking obvious intentions of X Toolkit into account this might be an intended limitation of that toolkit for it doesn't obviously support programmatic construction of complex scenes consisting of multi-level object hierarchies by relying on its API only.
In Three.JS, I am capable of rotating an object about its origin. If I were to do this with a line, for instance, the line rotates, but the positions of its vertices are not updated with their new locations. Is there some way to apply the rotation matrix to the position of the vertices to find the new position of the point? Say I rotate a line with points at (0,0,0) and (0,100,100) by 45° on the x, 20° on the y, and 100° on the z. How would I go about finding the actual position of the vertices with respect to the entire scene.
Thanks
yes, 'entire scene' means world position.
THREE.Vector3() has a applyMatrix4() method,
you can do the same things that the shader does so in order to project a vertex into world space you would do this
yourPoint.applyMatrix4(yourObject.matrixWorld);
to project that into camera space you can apply this next
yourPoint.applyMatrix4(camera.matrixWorld);
to get an actual screen position in -1 to 1
yourPoint.applyMatrix4(camera.projectionMatrix);
you would access your point like this
var yourPoint = yourObject.geometry.vertices[0]; //first vertex
also, rather than doing this three times, you can just combine the matrices. Didnt test this, but something along the lines of this. Might go the other way:
var neededPVMmatrix = new THREE.Matrix4().multiplyMatrices(yourObject.matrixWorld, camera.matrixWorld);
neededPVMmatrix.multiplyMatrices(neededPVMmatrix, camera.projectionMatrix);
if you need a good tutorial on what this does under the hood i recommend this
Alteredq posted everything there is to know about three.js matrices here
edit
One thing to note though, if you want just the rotation, not the translation, you need to use the upper 3x3 portion which is the rotation matrix, of the models world matrix. This might be slightly more complicated. I forgot what three.js gives you, but i think the normalMatrix would do the trick, or perhaps you can convert your THREE.Vector3() to THREE.Vector4(), and set .w to 0, this will prevent any translation from being applied.
edit2
if you want to move the line point in your example, instead of applying it to the particle, apply it to
var yourVertexWorldPosition = new THREE.Vector3().clone(geo.vertices[1]); //this is your second line point, to whatever you set it in your init function
yourVertexWorldPosition.applyMatrix4();//this transforms the new vector into world space based on the matrix you provide (line.matrixWorld)