Trying to understand how does unite and subtract methodes works in paperjs (paper.js).
var postyle = { fillColor:'grey', strokeColor: 'black'}
var p1 = Path.Circle({
center: new Point(80, 50),
radius: 50
})
var p2 = Path.Circle({
center: new Point(200, 50),
radius: 50
})
var p3 = Path.Circle({
center: new Point(120, 60),
radius: 50
})
var p4 = Path.Circle({
center: new Point(190, 60),
radius: 15
})
var p5 = Path.Circle({
center: new Point(50, 60),
radius: 10
})
var p6 = Path.Circle({
center: new Point(80, 40),
radius: 10
})
var pos=p1.unite(p2)
var neg=p3.unite(p4)
var boolp=pos.subtract(neg)
var path = boolp//.unite(p5)//.unite(p6)
path.style=postyle
You can try it in http://sketch.paperjs.org
It works like this, but if you uncomment the .unite(p5), the p5 circle is not union'ed with the others (the circle in the left quarter of moon).
If you uncomment also the .unite(p6), the p5 is now subtract'ed instead of union'ed. p6 is well union'ed.
If you change p6 to Point(60,40), p5 is well union'ed and p6 has the problem of union'ing.
What goes wrong ?
Thx
This question is explaining its answer itself.
As Union of the path with smaller path being whole immersed in the parent path will result the parent path itself.
If you change the x positions of the smaller circles you are getting the union correct as it should be, refer sketch.paper.js
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);
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.
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.]
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);