I have multiple diagrams on a paperJS project. I want to display a smaller version that can fit a box. Say 500px X 350px. Now how can I zoom in or zoom out to fit the diagram in best possible way.
You can scale the group of items to make them fit in a given box.
There is a convenient method to do that: item.fitBounds().
Here is a sketch demonstrating the solution.
new Path.Circle({
center: view.center - 100,
radius: 100,
fillColor: 'orange'
});
new Path.Circle({
center: view.center + 100,
radius: 100,
fillColor: 'blue'
});
project.activeLayer.fitBounds(view.bounds);
Related
wondering what the best way of creating responsive canvas sizes. At the moment I have to double up all my code using the following pattern
var cicrle = new Path.Circle({ radius: 40, fillColor: 'red' })
circle.position = view.center
view.onResise = function(event){
circle.position = view.center
}
This is ok for one item, but once the items start adding up it a lot of doubling up of code.
Is there a better way of doing things?
Thanks in advance
Paper.js has 2 kinds of grouping classes: Group and Layer; if you update one of those's position, you'll update all its descendants positions at once.
By default, the created items are implicitely added to the active layer (project.activeLayer) so for a simple scene:
project.activeLayer.position = view.center;
should do the trick.
See this sketch for a demonstration.
new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'orange'
});
new Path.Circle({
center: view.center + 50,
radius: 50,
fillColor: 'orange'
});
function onResize() {
project.activeLayer.position = view.center;
}
Would you please advice where I could find explanation about Group({insert:true}) option as I could not find it in reference? How does this option work and if someone had made that example he should be able to read about it somewhere. Thanks.
This item constructor option is an internal API that doesn't really have a public use case, this is why you didn't find it in the documentation.
It is mainly used for internal operations and testing purpose.
It is true by default and if you set it to false, the consequence is that the created item will not be inserted into the scene graph, meaning you won't see it on the screen.
Look at this sketch for a demonstration.
// This item will be inserted as a child of the active layer.
const itemInserted = new Path.Circle({
center: view.center - 50,
radius: 50,
fillColor: 'orange'
});
// This item will not be inserted in the scene graph.
const itemNotInserted = new Path.Circle({
center: view.center + 50,
radius: 50,
fillColor: 'blue',
insert: false
});
I am trying to modify the bounding rectangle of an object in paperjs.
Here is my code:
project.currentStyle = {
fillColor: 'green',
strokeColor: 'black'
};
var circle = new Path.Circle(new Point(150, 150), 50);
var bounds = circle.bounds;
bounds.insert(2, new Point(bounds.center.x, bounds.top));
bounds.insert(2, new Point(bounds.center.x, bounds.top-25));
bounds.insert(2, new Point(bounds.center.x, bounds.top));
I am getting an error that bounds.insert is not a function.
If this is not possible, how can I add segments to the bounding rectangle?
There is a difference between the Path.Rectangle() method which create a rectangular Path, and a Rectangle which corresponds to the abstract geometric shape:
A Rectangle specifies an area that is enclosed by it’s top-left point (x, y), its width, and its height. It should not be confused with a rectangular path, it is not an item.
You can easily create a Path from your circle bounds:
let rectanglePath = new Path.Rectangle(circle.bounds);
rectanglePath.strokeColor = 'red';
Can anyone advise as to how I should implement a system where the map markers' sizes increase according to their order?
The markers are arranged in order and I would like the latest marker to be the biggest and the others to decrease in size the lower in order they are.
A solution could be to use SVG markers. You can scale them as you wish. Here is a quick example with a simple circle marker:
var icon = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#FF0000',
fillOpacity: .6,
anchor: new google.maps.Point(0,0),
strokeWeight: 0,
scale: 1
}
Note the scale property. You can increment this value every time you create a marker.
JSFiddle demo
Hope this helps!
increment the size of icon marker
that may help
Pardon my noobishness, but, although I've seen this issue discussed, I haven't found an answer. I am trying to draw concentric circles on a Google Map using the API v3, making each clickable as on a bullseye target, but always the largest one ends up on top, which means it is the only clickable one.
The following uses an array called "subjects" that consists of increasing radii and various fillcolors.
for (i=0;i<subjects.length;i++) {
radi = subjects[i][0];
fillcolr = subjects[i][1];
zindx = subjects.length - i;
newcircle = new google.maps.Circle({
radius: radi,
center: centerPoint,
strokeWidth: 1,
fillOpacity: 1.0,
fillColor: fillcolr,
zIndex: zindx
});
// display it
newcircle.setMap(map);
// make outer circle clickable
google.maps.event.addListener(newcircle, 'click', function() {
circleClickedInfo(i);
});
The circles are there, the zIndex is set, but the biggest circle is always on top. I have tried setting zIndex on a pass afterwards, boosting each zIndex by 10000, reversing the order in which I create the circles, not setting the zIndex explicitly, etc. I'm sure I am missing something obvious (see the aforementioned noobishness), but I can't figure out what it is. TIA for any pointers...
Try this for every shape you need:
selectedShape.setOptions({zIndex:0});