i need to plot (in cytoscape.js) a circle inscibed to another circle.
I can make the external circle with:
shape:'ellipse',
height: 15,
width: 15,
'background-color': 'white',
'border-width':0.5,
'border-color':'black'
But how can i make the other circle inscribed?
EDIT: In particular, i have to put inside a white circle with black circumference, a smaller white circle with black circumference.
2th EDIT:
I solved by creating a fake node (equal to real one but smaller) that follows the original when dragged or grabbed.
var compAtrr = cy.$('node[type = "originalnode"]');
compAtrr.on('grabon drag',function(evt){
var node = evt.target;
var idnode = node.data('id');
var fakenode = cy.$id(idnode+'fake');
var ix = node.position('x');
var iy = node.position('y');
fakenode.position({
x: ix,
y: iy
});
});
var fakeAtrr = cy.$('node[type = "fakenode"]');
fakeAtrr.on('grabon drag',function(evt){
var node = evt.target;
var idnode = node.data('id');
var l = idnode.length;
idnode = idnode.slice(0,l-4); //remove 'fake' string
var realnode = cy.$id(idnode);
var ix = node.position('x');
var iy = node.position('y');
realnode.position({
x: ix,
y: iy
});
});
Thanks anyway
Have a look at this code pen, you can specify an inner circle by defining the background or a border:
style: [
{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px',
'border-color': 'black',
'border-opacity': '1',
'border-width': '10px'
}
},
...
I am afraid this is not possible in Cytoscape.js. Your best bet is to use a background image.
You can also try setting border style to double, but this is very limited - you won't be able to change the distance between lines.
You can draw arbitrary content on a node with one or more SVG background images.
Related
I'm trying to use physics (AmmoJS) in BabylonJS for an imported mesh.
For meshes I create on the fly everything works fine, but when I import a mesh it falls through the ground.
const ground = BABYLON.MeshBuilder.CreateBox("ground",
{ width: 10, height: 1, depth: 10}, scene);
ground.receiveShadows = true;
ground.checkCollisions = true;
ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground , BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, friction: 0.5, restitution: 0.5 }, scene);
BABYLON.SceneLoader.ImportMesh(["car9"], "models/", "Policecar.glb", scene, function (meshes, particleSystems, skeletons) {
for (let i in meshes) {
meshes[i].checkCollisions = true;
}
let policecar = meshes[0];
policecar.physicsImpostor = new BABYLON.PhysicsImpostor(policecar, BABYLON.PhysicsImpostor.MeshImpostor, { mass: 10, friction: 0.5, restitution: 0.5 });
policecar.position = new BABYLON.Vector3(0, 10, 0);
policecar.scaling = new BABYLON.Vector3(scale, scale, scale);
});
When I change the restition of the policecar to 0 or 1, it doesn't fall through the ground, but bounces weirdly a few times and falls on it's side. With a BoxImpostor instead of MeshImpostor it falls straight through.
Any ideas?
You have to consider that .glb-files use right handed system, while BabylonJS uses left handed system. So I would recommend to set BabylonJS to right handed and don't scale by absolute values.
scene.useRightHandedSystem = true;
...
policecar.scaling.scaleInPlace(scale);
new to createjs here:
Created this fiddle: example. I would like the rect to grow from the center and not from the top left corner. I couldn't find any help, I don't know what to search for.
Code:
const PAGE_WIDTH = 150,
PAGE_HEIGHT = 75;
var stage = new createjs.Stage("canvas");
createjs.Ticker.setFPS(60);
createjs.Ticker.on("tick", tick);
var page = new createjs.Shape();
page.regX = PAGE_WIDTH/2;
page.regY = PAGE_HEIGHT/2;
page.x = 50;
page.y = 50;
stage.addChild(page);
var pageCommand = page.graphics
.beginFill('red')
.drawRect(0, 0, 1, 1).command;
createjs.Tween.get(pageCommand)
.to({w:PAGE_WIDTH, h: PAGE_HEIGHT}, 700, createjs.Ease.elasticOut)
function tick() {
stage.update();
}
Thanks.
The best way is to change the registration point of your graphics so it grows from the center.
Your code:
.drawRect(0, 0, 1, 1).command;
.to({w:PAGE_WIDTH, h: PAGE_HEIGHT})
Instead:
.drawRect(-1.-1, 2, 2);
.to({x:-PAGE_WIDTH/2, y:-PAGE_WIDTH/2, w:PAGE_WIDTH, h: PAGE_HEIGHT})
Fiddle: http://jsfiddle.net/1kjkqo2v/
[edit: I said 2 options initially, but the second (using regX and regY) wouldn't work well, since you have to tween that value as well as your size changes.]
Using cytoscape.js to draw a graph. I need to add circle above the node at top-right position. After drawing the graph, is there any API wherein we can get positions of nodes.
Also, I have used the code as follows:
elements : {
nodes : [ {
data : {
id : '1',
name : 'A'
}
}
]
}
var pos = cy.nodes("#1").position();
'#1' is the ID of the node in the data attribute. However, we are not able to add the node/circle at that exact position.
If you want to get something like:
then this code adds the circle to a node knowing it's id:
function addCircle(nodeId, circleText){
var parentNode = cy.$('#' + nodeId);
if (parentNode.data('isCircle') || parentNode.data('circleId'))
return;
parentNode.lock();
var px = parentNode.position('x') + 10;
var py = parentNode.position('y') - 10;
var circleId = (cy.nodes().size() + 1).toString();
parentNode.data('circleId', circleId);
cy.add({
group: 'nodes',
data: { weight: 75, id: circleId, name: circleText, isCircle: true },
position: { x: px, y: py },
locked: true
}).css({
'background-color': 'yellow',
'shape': 'ellipse',
'background-opacity': 0.5
}).unselectify();
}
// ...
addCircle('1', 'Bubble A');
but it must be called after the node's positions are known, when the layout settles down.
The locking is there to prevent that node and it's circle get apart.
jsFiddle demo: http://jsfiddle.net/xmojmr/wvznb9pf/
Using compound node which would keep the node and it's circle together would be probably better, once the support for positioning child nodes is implemented.
Disclaimer: I'm cytoscape.js newbie, use at your own risk
Trying to display a dashed line with KineticJS (v4.7.3). It works fine in Chrome, but in IE (v10), a normal solid line is displayed.
Here's the code:
var element = document.getElementById('target'),
stage = new Kinetic.Stage({
container: element,
width: element.offsetWidth,
height: element.offsetHeight
}),
layer = new Kinetic.Layer();
layer.add(new Kinetic.Line({
points: [10, 10, 190, 190],
stroke: 'black',
strokeWidth: 1,
dashArray: [5, 4]
}));
stage.add(layer);
And you can see the behavior for yourself in here.
Fixed in IE-11 !
Until all "bad" IE's die, you can "do-it-yourself" fairly easily for lines (less easily for curves).
You can use a custom Kinetic.Shape which gives you access to a canvas context (a wrapped context).
Code is taken from this SO post: dotted stroke in <canvas>
var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
if (CP && CP.lineTo){
CP.dashedLine = function(x,y,x2,y2,dashArray){
if (!dashArray) dashArray=[10,5];
if (dashLength==0) dashLength = 0.001; // Hack for Safari
var dashCount = dashArray.length;
this.moveTo(x, y);
var dx = (x2-x), dy = (y2-y);
var slope = dx ? dy/dx : 1e15;
var distRemaining = Math.sqrt( dx*dx + dy*dy );
var dashIndex=0, draw=true;
while (distRemaining>=0.1){
var dashLength = dashArray[dashIndex++%dashCount];
if (dashLength > distRemaining) dashLength = distRemaining;
var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
if (dx<0) xStep = -xStep;
x += xStep
y += slope*xStep;
this[draw ? 'lineTo' : 'moveTo'](x,y);
distRemaining -= dashLength;
draw = !draw;
}
}
}
Totally off-topic: Go Wisconsin! I spent many a great summer at my grandmothers house in
Lacrosse.
Short answer: Not supported.
Via a thread here, the creator of KineticJS addresses this issue:
"[T]he dashArray property now uses the browser-implemented dashArray
property of the canvas context, according to the w3c spec. Firefox is
a little behind at the moment."
If you follow the thread, you'll discover that this was an issue for Firefox at one point, too, but that has been resolved. However, support for IE should apparently not be expected any time soon.
I have a VectorLayer over my OSM and I have successfully plotted a polygon on my Map.However what is happening is that the polygon is getting too large in size as I zoom in or getting small in size as I zoom out. Is there a way to keep the size of the polygon independent of zoom?
Here is my code for plotting the circle
map = new OpenLayers.Map("container");
var mapnik = new OpenLayers.Layer.OSM();
epsg4326 = new OpenLayers.Projection("EPSG:4326");
var zoom = 6;
map.addLayer(mapnik);
map.addControl(new OpenLayers.Control.DragPan());
projectTo = map.getProjectionObject();
var lonLat = new OpenLayers.LonLat(-82.56,43.67611).transform(epsg4326, projectTo);
map.setCenter(lonLat, zoom);
var styleMap = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults(
{fillColor: "black", fillOpacity: 0.5, strokeColor: "black"},
OpenLayers.Feature.Vector.style["default"]));
var vectorLayer = new OpenLayers.Layer.Vector("Overlay", {styleMap: styleMap});
var point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);
var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon
(
point,
50000,
50,
0
);
var featurecircle = new OpenLayers.Feature.Vector(mycircle);
vectorLayer.addFeatures([featurecircle]);
map.addLayer(vectorLayer);