I'm trying to animate a circle being drawn using Paper.js.
As the circle tool is just a quick access for instantiating a path constructed via moveTo/arcTo etc, there are no arguments to support start and end angles (for open pie chart-like circles).
What I am looking for is a way to animate the circle being drawn from it's first point to an angle of my choice at a certain radius.
The actual canvas specification allows for explicit startAngle and endAngle to be specified. If this was the case within Paper.js I could easily achieve what I am looking for. However, within Paper.js I have yet to come across a method of replicating such control. I created something in Fabric.js that worked as Fabric's implementation of the circle shape used the same attributes as the arc command in the specification.
Does anyone know of a way this can be achieved so I can animate the endAngle?
Here's a conversion function that accepts html5 canvas arc arguments and returns the from, through, to arguments needed for a Paper.js arc.
function canvasArcToPaperArc(cx,cy,radius,startAngle,endAngle,strokecolor){
var startX=cx+radius*Math.cos(startAngle);
var startY=cy+radius*Math.sin(startAngle);
var endX=cx+radius*Math.cos(endAngle);
var endY=cy+radius*Math.sin(endAngle);
var thruX=cx+radius*Math.cos((endAngle-startAngle)/2);
var thruY=cy+radius*Math.sin((endAngle-startAngle)/2);
var from = new Point(startX,startY);
var through = new Point(thruX,thruY);
var to = new Point(endX,endY);
return({from:from, through:through, to:to});
}
These are 4 polygons I have: http://imgur.com/vsVjxE1 in QGIS. I now wanted to use them with D3.js. I already tried out the things in QGIS generated shapefile malformed when converted to topojson by mapshaper. That was working well on the old json file. But when I was creating a new one, it was bugging in the vertical middle. That's the example http://jsfiddle.net/kwoxer/kpL1uyy2/5/:
var projection = d3.geo.projection(function(x, y) { return [x, y];})
.precision(0).scale(1).translate([0, 0]);
var path = d3.geo.path().projection(projection);
I also tried:
var path = d3.geo.path().projection(null);
but then the whole map was mirrored in the middle.
I think I don't use that system correctly I must assume. The json is fine on mapshaper, too. So do you have some tips, so that I just draw anything I want however big it is and then d3.js is able to draw it as it is. =)
Maybe by
normalizing lan/lng
disabling KBS
I really don't know why creating an own map is not straithforward.
Edit1: found nearly my issue here https://gis.stackexchange.com/questions/54373/either-geojson-to-topojson-conversion-problem-or-projection-issue-with-d3-js but I got:
C:\Program Files\GDAL>ogr2ogr.exe -f "GeoJSON" -s_srs region.prj -t_srs EPSG:432
6 asdas.json region.shp
ERROR 4: Failed to create GeoJSON datasource: asdas.json.
GeoJSON driver failed to create asdas.json
Edit2: already found this interesting answer: https://gis.stackexchange.com/questions/14731/how-do-i-specify-a-crs-for-a-fictional-game-map-in-qgis
But I used such a projection like he used, but still failing with d3.js.
I'm just using an own projection now:
+proj=eqc +a=1790493.11 +lat_ts=0 +lon_0=0 +rf=800 +units=m +no_defs
With that projection all is fine.
I am trying to use paper.js to animate svgs I designed in Illustrator. Specifically what I am trying to do is import the svg, and then expand and contract the points on the path. Here is an example of moving paths in paper.js: http://paperjs.org/tutorials/paths/working-with-path-items/
What I want eventually is the path to expand based off the width of another object. It will expand if the object is touching it, and contract back to normal if the object is no longer touching it.
I know that to import the svg I use:
project.importSVG(document.getElementById('svg')[, options.expandShapes: true ]);
The option.expandShapes: true, from what I understand expands the shapes to path items.
How do I access the paths of the svg, in order to expand and contract them?
Here is my SVG path :
path fill="#FFD495" d="M456.5,1396.3c-21-31.5-47.7-90.4-45.3-135.6c3.3-62.9,21.3-997.5,15.1-1014.5
c-12.6-34.9-7.8-113.1-100.3-111.6c-107.1,1.8-132.7,6.6-159.4,6.6c-47.9,0-23-91.8-23-91.8s39.6-7.6,107.8-7.6s136.8-22.2,205,30.8
s67.6,52.5,75.2,97.9c5.7,34.3,30.3,1039.4,30.3,1075.1c0,53-22.7,98.4,7.6,98.4c0,0,103.5,134-104,58.3"
Using project.importSVG has actually inserted your SVG paths as Path items in your project.
These are stored in an array as children of the project, accessible by using project.activeLayer.children.
If you do console.log(project.activeLayer.children), you should be able to inspect them in your console.
So now you can access the Path's themselves, second step is to access the Segments of those paths, if you wish to do so.
Segments, are children of Paths so they can be acccessed by Path.segments.
You should read about Project Hierarchy and Path Items
You can't treat it as a path after you import the SVG. But here is a more simple way to achieve your goal.
Just create your SVG as a Path directly in Paper.js via pathData using SVG path syntax.
like this:
pathData = 'M456.5,1396.3c-21-31.5-47.7-90.4-45.3-135.6c3.3-62.9,21.3-997.5,15.1-1014.5c-12.6-34.9-7.8-113.1-100.3-111.6c-107.1,1.8-132.7,6.6-159.4,6.6c-47.9,0-23-91.8-23-91.8s39.6-7.6,107.8-7.6s136.8-22.2,205,30.8s67.6,52.5,75.2,97.9c5.7,34.3,30.3,1039.4,30.3,1075.1c0,53-22.7,98.4,7.6,98.4c0,0,103.5,134-104,58.3';
var path = new Path(pathData);
path.strokeColor = 'red';
path.strokeWidth = 10;
see the result in Paper.js Sketch
And then you can animate this path.
I'm trying to import a diagram in our custom format to mxgraph, but am stuck on setting the points on the connector. I've tried called the functions in mxEdgeStyle like ElbowConnector:
ElbowConnector(view.getState(edge), model.getSource(edge), model.getTarget(edge), points)
where points is the array of point I want to set. I get the feeling I'm calling entirely the wrong function, or am I using it incorrectly?
The edge styles are style like the other key/value styles. In the link you provide to the API specifications, the top example tells you how to use it:
var style = stylesheet.getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
I have been trying to convert map in SVG to HTML area map for three days. I`am trying to do that with this SVG.
I've tried to convert this SVG with several methods and programs, but all of them failed.
e.g.: inkscape, inkscapeMap, Adobe Illustrator, Polygonator, SVGtoHTML and more.
So I wrote my own PHP script to do the job. Its works fine, but it converts only polygons. But there are two paths in SVG which need to be convert to polygon as well. I've tried to convert these paths into polygons in Illustrator and Inkscape, but apparently there is no way how to force these programs to convert path into polygons. (SVG editors probably decide alone, if they do the conversion or not). I find this topic on SO. But I'am not able to get the JS work - I dont know what the param sample is, and more - browser said that function createElementNS is unknown.
The best result I'am able to reach is this HTML, but there is still two region missing (because they are in SVG in paths)
I would be pleased for any clue.
QUESTIONS
1) How to transform SVG paths into polygons? Is that possible?
2) Is there any software which converts SVG into HTML area maps?
3) Could you show my example parametrs, in this JS function (function written Phrogz):
function polygonSampledFromPath(path,samples){
var doc = path.ownerDocument;
var poly = doc.createElementNS('http://www.w3.org/2000/svg','polygon');
var points = [];
var len = path.getTotalLength();
var step = step=len/samples;
for (var i=0;i<=len;i+=step){
var p = path.getPointAtLength(i);
points.push( p.x+','+p.y );
}
poly.setAttribute('points',points.join(' '));
return poly;
}
3ad) Why is function createElementNS unknown?
PS: I hope you understand my English :)