Skip to content

Instantly share code, notes, and snippets.

@daemth
Created April 20, 2016 07:46
Show Gist options
  • Save daemth/1d93e36c60d6147822d0baee78bede6a to your computer and use it in GitHub Desktop.
Save daemth/1d93e36c60d6147822d0baee78bede6a to your computer and use it in GitHub Desktop.
requirebin sketch
// Welcome! require() some modules from npm (like you were using browserify)
// and then hit Run Code to run your code on the right side.
// Modules get downloaded from browserify-cdn and bundled in your browser.
// https://tonicdev.com/npm/svg-points
var p = require("svg-points")
var toPoints = p.toPoints;
const points = toPoints( {
shape: 'path',
d: 'M-49.1,194.8c0.6-0.9,1.2-1.9,1.8-2.8c4.8-8.4,6-18.2,3.4-27.6c-1.7-6.1-4.9-11.6-9.3-16c-3.4-3.4-7.4-6-11.7-7.8l5,9.1l-8.2,4.5c1.9,1,3.6,2.3,5.2,3.9c2.8,2.8,4.8,6.2,5.8,10c1.6,5.7,0.9,11.7-2,16.9l-4.4-4.4l0.2,18.5l18.3-0.2L-49.1,194.8z',
} );
console.log(points);
console.log(points.length);
var output = [];
for (var i = 0, len = points.length; i < len; i++){
if(points[i].moveTo === true){
output.push('M');
}
if(points[i].curve){
output.push('c');
}
output.push(points[i].x);
output.push(points[i].y);
}
console.log(output);
setTimeout(function(){require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _toPoints=require("./toPoints");var _toPoints2=_interopRequireDefault(_toPoints);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var pointsToD=function pointsToD(p){var d="";var i=0;var firstPoint=p[i];var _iteratorNormalCompletion=true;var _didIteratorError=false;var _iteratorError=undefined;try{for(var _iterator=p[Symbol.iterator](),_step;!(_iteratorNormalCompletion=(_step=_iterator.next()).done);_iteratorNormalCompletion=true){var point=_step.value;var isFirstPoint=i===0;var isLastPoint=i===p.length-1;var prevPoint=isFirstPoint?null:p[i-1];var _point$curve=point.curve;var curve=_point$curve===undefined?false:_point$curve;var moveTo=point.moveTo;var x=point.x;var y=point.y;if(moveTo||isFirstPoint){if(!isLastPoint){d+="M"+x+","+y}}else if(curve){switch(curve.type){case"arc":var _point$curve2=point.curve;var _point$curve2$largeAr=_point$curve2.largeArcFlag;var largeArcFlag=_point$curve2$largeAr===undefined?0:_point$curve2$largeAr;var rx=_point$curve2.rx;var ry=_point$curve2.ry;var _point$curve2$sweepFl=_point$curve2.sweepFlag;var sweepFlag=_point$curve2$sweepFl===undefined?0:_point$curve2$sweepFl;var _point$curve2$xAxisRo=_point$curve2.xAxisRotation;var xAxisRotation=_point$curve2$xAxisRo===undefined?0:_point$curve2$xAxisRo;d+="A"+rx+","+ry+","+xAxisRotation+","+largeArcFlag+","+sweepFlag+","+x+","+y;break;case"cubic":var _point$curve3=point.curve;var cx1=_point$curve3.x1;var cy1=_point$curve3.y1;var cx2=_point$curve3.x2;var cy2=_point$curve3.y2;d+="C"+cx1+","+cy1+","+cx2+","+cy2+","+x+","+y;break;case"quadratic":var _point$curve4=point.curve;var qx1=_point$curve4.x1;var qy1=_point$curve4.y1;d+="Q"+qx1+","+qy1+","+x+","+y;break}if(isLastPoint&&x===firstPoint.x&&y===firstPoint.y){d+="Z"}}else if(isLastPoint&&x===firstPoint.x&&y===firstPoint.y){d+="Z"}else if(x!==prevPoint.x&&y!==prevPoint.y){d+="L"+x+","+y}else if(x!==prevPoint.x){d+="H"+x}else if(y!==prevPoint.y){d+="V"+y}i++}}catch(err){_didIteratorError=true;_iteratorError=err}finally{try{if(!_iteratorNormalCompletion&&_iterator.return){_iterator.return()}}finally{if(_didIteratorError){throw _iteratorError}}}return d};var toPath=function toPath(s){var isPoints=Array.isArray(s);var isGroup=isPoints?Array.isArray(s[0]):s.shape==="g";var points=isPoints?s:isGroup?s.shapes.map(function(shp){return(0,_toPoints2.default)(shp)}):(0,_toPoints2.default)(s);if(isGroup){return points.map(function(p){return pointsToD(p)})}return pointsToD(points)};exports.default=toPath},{"./toPoints":2}],2:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};function _objectWithoutProperties(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i]}return target}var toPoints=function toPoints(_ref){var shape=_ref.shape;var attributes=_objectWithoutProperties(_ref,["shape"]);switch(shape){case"circle":return getPointsFromCircle(attributes);case"ellipse":return getPointsFromEllipse(attributes);case"line":return getPointsFromLine(attributes);case"path":return getPointsFromPath(attributes);case"polygon":return getPointsFromPolygon(attributes);case"polyline":return getPointsFromPolyline(attributes);case"rect":return getPointsFromRect(attributes);case"g":return getPointsFromG(attributes);default:throw new Error("Not a valid shape type")}};var getPointsFromCircle=function getPointsFromCircle(_ref2){var cx=_ref2.cx;var cy=_ref2.cy;var r=_ref2.r;return[{x:cx,y:cy-r,moveTo:true},{x:cx,y:cy+r,curve:{type:"arc",rx:r,ry:r}},{x:cx,y:cy-r,curve:{type:"arc",rx:r,ry:r}}]};var getPointsFromEllipse=function getPointsFromEllipse(_ref3){var cx=_ref3.cx;var cy=_ref3.cy;var rx=_ref3.rx;var ry=_ref3.ry;return[{x:cx,y:cy-ry,moveTo:true},{x:cx,y:cy+ry,curve:{type:"arc",rx:rx,ry:ry}},{x:cx,y:cy-ry,curve:{type:"arc",rx:rx,ry:ry}}]};var getPointsFromLine=function getPointsFromLine(_ref4){var x1=_ref4.x1;var x2=_ref4.x2;var y1=_ref4.y1;var y2=_ref4.y2;return[{x:x1,y:y1,moveTo:true},{x:x2,y:y2}]};var validCommands=/[MmLlHhVvCcSsQqTtAaZz]/g;var commandLengths={m:2,l:2,h:1,v:1,c:6,s:4,q:4,t:2,a:7,z:0};var optionalArcKeys=["xAxisRotation","largeArcFlag","sweepFlag"];var getCommands=function getCommands(d){return d.match(validCommands)};var getParams=function getParams(d){return d.split(validCommands).map(function(v){return v.replace(/[0-9]+-/g,function(m){return m.slice(0,-1)+" -"})}).map(function(v){return v.replace(/\.[0-9]+/g,function(m){return m+" "})}).map(function(v){return v.trim()}).filter(function(v){return v.length>0}).map(function(v){return v.split(/[ ,]+/).map(parseFloat).filter(function(n){return!isNaN(n)})})};var getPointsFromPath=function getPointsFromPath(_ref5){var d=_ref5.d;var commands=getCommands(d);var params=getParams(d);var points=[];var moveTo=void 0;for(var i=0,l=commands.length;i<l;i++){var command=commands[i];var commandLength=commandLengths[command.toLowerCase()];var relative=false;if(commandLength>0){var commandParams=params.shift();var iterations=commandParams.length/commandLength;for(var j=0;j<iterations;j++){var prevPoint=i===0?null:points[points.length-1];switch(command){case"m":relative=true;case"M":var x=(relative?prevPoint.x:0)+commandParams.shift();var y=(relative?prevPoint.y:0)+commandParams.shift();moveTo={x:x,y:y};points.push({x:x,y:y,moveTo:true});break;case"l":relative=true;case"L":points.push({x:(relative?prevPoint.x:0)+commandParams.shift(),y:(relative?prevPoint.y:0)+commandParams.shift()});break;case"h":relative=true;case"H":points.push({x:(relative?prevPoint.x:0)+commandParams.shift(),y:prevPoint.y});break;case"v":relative=true;case"V":points.push({x:prevPoint.x,y:(relative?prevPoint.y:0)+commandParams.shift()});break;case"a":relative=true;case"A":points.push({curve:{type:"arc",rx:commandParams.shift(),ry:commandParams.shift(),xAxisRotation:commandParams.shift(),largeArcFlag:commandParams.shift(),sweepFlag:commandParams.shift()},x:(relative?prevPoint.x:0)+commandParams.shift(),y:(relative?prevPoint.y:0)+commandParams.shift()});var _iteratorNormalCompletion=true;var _didIteratorError=false;var _iteratorError=undefined;try{for(var _iterator=optionalArcKeys[Symbol.iterator](),_step;!(_iteratorNormalCompletion=(_step=_iterator.next()).done);_iteratorNormalCompletion=true){var k=_step.value;if(points[i]["curve"][k]===0){delete points[i]["curve"][k]}}}catch(err){_didIteratorError=true;_iteratorError=err}finally{try{if(!_iteratorNormalCompletion&&_iterator.return){_iterator.return()}}finally{if(_didIteratorError){throw _iteratorError}}}break;case"c":relative=true;case"C":points.push({curve:{type:"cubic",x1:(relative?prevPoint.x:0)+commandParams.shift(),y1:(relative?prevPoint.y:0)+commandParams.shift(),x2:(relative?prevPoint.x:0)+commandParams.shift(),y2:(relative?prevPoint.y:0)+commandParams.shift()},x:(relative?prevPoint.x:0)+commandParams.shift(),y:(relative?prevPoint.y:0)+commandParams.shift()});break;case"s":relative=true;case"S":var sx2=(relative?prevPoint.x:0)+commandParams.shift();var sy2=(relative?prevPoint.y:0)+commandParams.shift();var sx=(relative?prevPoint.x:0)+commandParams.shift();var sy=(relative?prevPoint.y:0)+commandParams.shift();var diff={};var sx1=void 0;var sy1=void 0;if(prevPoint.curve&&prevPoint.curve.type==="cubic"){diff.x=Math.abs(prevPoint.x-prevPoint.curve.x2);diff.y=Math.abs(prevPoint.y-prevPoint.curve.y2);sx1=prevPoint.x<prevPoint.curve.x2?prevPoint.x-diff.x:prevPoint.x+diff.x;sy1=prevPoint.y<prevPoint.curve.y2?prevPoint.y-diff.y:prevPoint.y+diff.y}else{diff.x=Math.abs(sx-sx2);diff.y=Math.abs(sy-sy2);sx1=sx<sx2?prevPoint.x-diff.x:prevPoint.x+diff.x;sy1=sy<sy2?prevPoint.y+diff.y:prevPoint.y-diff.y}points.push({curve:{type:"cubic",x1:sx1,y1:sy1,x2:sx2,y2:sy2},x:sx,y:sy});break;case"q":relative=true;case"Q":points.push({curve:{type:"quadratic",x1:(relative?prevPoint.x:0)+commandParams.shift(),y1:(relative?prevPoint.y:0)+commandParams.shift()},x:(relative?prevPoint.x:0)+commandParams.shift(),y:(relative?prevPoint.y:0)+commandParams.shift()});break;case"t":relative=true;case"T":var tx=(relative?prevPoint.x:0)+commandParams.shift();var ty=(relative?prevPoint.y:0)+commandParams.shift();var tx1=void 0;var ty1=void 0;if(prevPoint.curve&&prevPoint.curve.type==="quadratic"){var _diff={x:Math.abs(prevPoint.x-prevPoint.curve.x1),y:Math.abs(prevPoint.y-prevPoint.curve.y1)};tx1=prevPoint.x<prevPoint.curve.x1?prevPoint.x-_diff.x:prevPoint.x+_diff.x;ty1=prevPoint.y<prevPoint.curve.y1?prevPoint.y-_diff.y:prevPoint.y+_diff.y}else{tx1=prevPoint.x;ty1=prevPoint.y}points.push({curve:{type:"quadratic",x1:tx1,y1:ty1},x:tx,y:ty});break}}}else{points.push({x:moveTo.x,y:moveTo.y})}}return points};var getPointsFromPolygon=function getPointsFromPolygon(_ref6){var points=_ref6.points;return getPointsFromPoints({closed:true,points:points})};var getPointsFromPolyline=function getPointsFromPolyline(_ref7){var points=_ref7.points;return getPointsFromPoints({closed:false,points:points})};var getPointsFromPoints=function getPointsFromPoints(_ref8){var closed=_ref8.closed;var points=_ref8.points;var numbers=points.split(/[\s,]+/).map(function(n){return parseFloat(n)});var p=numbers.reduce(function(arr,point,i){if(i%2===0){arr.push({x:point})}else{arr[(i-1)/2].y=point}return arr},[]);if(closed){p.push(_extends({},p[0]))}p[0].moveTo=true;return p};var getPointsFromRect=function getPointsFromRect(_ref9){var height=_ref9.height;var rx=_ref9.rx;var ry=_ref9.ry;var width=_ref9.width;var x=_ref9.x;var y=_ref9.y;if(rx||ry){return getPointsFromRectWithCornerRadius({height:height,rx:rx?rx:ry,ry:ry?ry:rx,width:width,x:x,y:y})}return getPointsFromBasicRect({height:height,width:width,x:x,y:y})};var getPointsFromBasicRect=function getPointsFromBasicRect(_ref10){var height=_ref10.height;var width=_ref10.width;var x=_ref10.x;var y=_ref10.y;return[{x:x,y:y,moveTo:true},{x:x+width,y:y},{x:x+width,y:y+height},{x:x,y:y+height},{x:x,y:y}]};var getPointsFromRectWithCornerRadius=function getPointsFromRectWithCornerRadius(_ref11){var height=_ref11.height;var rx=_ref11.rx;var ry=_ref11.ry;var width=_ref11.width;var x=_ref11.x;var y=_ref11.y;var curve={type:"arc",rx:rx,ry:ry,sweepFlag:1};return[{x:x+rx,y:y,moveTo:true},{x:x+width-rx,y:y},{x:x+width,y:y+ry,curve:curve},{x:x+width,y:y+height-ry},{x:x+width-rx,y:y+height,curve:curve},{x:x+rx,y:y+height},{x:x,y:y+height-ry,curve:curve},{x:x,y:y+ry},{x:x+rx,y:y,curve:curve}]};var getPointsFromG=function getPointsFromG(_ref12){var shapes=_ref12.shapes;return shapes.map(function(s){return toPoints(s)})};exports.default=toPoints},{}],"svg-points":[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.toPoints=exports.toPath=undefined;var _toPath=require("./toPath");var _toPath2=_interopRequireDefault(_toPath);var _toPoints=require("./toPoints");var _toPoints2=_interopRequireDefault(_toPoints);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}exports.toPath=_toPath2.default;exports.toPoints=_toPoints2.default},{"./toPath":1,"./toPoints":2}]},{},[]);var p=require("svg-points");var toPoints=p.toPoints;const points=toPoints({shape:"path",d:"M-49.1,194.8c0.6-0.9,1.2-1.9,1.8-2.8c4.8-8.4,6-18.2,3.4-27.6c-1.7-6.1-4.9-11.6-9.3-16c-3.4-3.4-7.4-6-11.7-7.8l5,9.1l-8.2,4.5c1.9,1,3.6,2.3,5.2,3.9c2.8,2.8,4.8,6.2,5.8,10c1.6,5.7,0.9,11.7-2,16.9l-4.4-4.4l0.2,18.5l18.3-0.2L-49.1,194.8z"});console.log(points);console.log(points.length);var output=[];for(var i=0,len=points.length;i<len;i++){if(points[i].moveTo===true){output.push("M")}if(points[i].curve){output.push("c")}output.push(points[i].x);output.push(points[i].y)}console.log(output)},0);
{
"name": "requirebin-sketch",
"version": "1.0.0",
"dependencies": {
"svg-points": "1.2.4"
}
}
<!-- contents of this file will be placed inside the <body> -->
<!-- contents of this file will be placed inside the <head> -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment