Skip to content

Commit

Permalink
Implemented linear and radial gradients for fill and stroke colors.
Browse files Browse the repository at this point in the history
  • Loading branch information
@winsock
winsock committed Nov 1, 2017
1 parent ec5b630 commit 67231fb
Showing 1 changed file with 66 additions and 5 deletions.
71 changes: 66 additions & 5 deletions js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ var lastFileName = "";
var lastFileData;
var warnings = [];
var svgStyles = {};
var gradients = {};
var globalSvg;

var clipPathEnabled = false;
Expand Down Expand Up @@ -234,6 +235,10 @@ function recursiveTreeWalk(parent, groupLevel, clipPath) {
}

function preprocessReferences(svg) {
svg.find("defs").children().each(function () {
var current = $(this);
substituteUseRef(svg, current);
});
svg.find("use").each(function () {
var current = $(this);
substituteUseRef(svg, current);
Expand Down Expand Up @@ -529,16 +534,37 @@ function printPath(pathData, stylesArray, groupLevel, clipPath) {
if (!clipPath) {
generatedOutput += INDENT.repeat(groupLevel + 1) + '<path\n';
if (toBool(localStorage.useIdAsName)) generatedOutput += generateAttr('name', styles["id"], groupLevel, "");
generatedOutput += generateAttr('fillColor', parseColorToHex(styles["fill"]), groupLevel, "none");
var gradientID = null;
var gradientAttr = null;
if ((typeof styles["fill"] !== "undefined") && styles["fill"].startsWith("url(")) {
gradientID = styles["fill"].slice(5, -1);
gradientAttr = "fillColor";
} else {
generatedOutput += generateAttr('fillColor', parseColorToHex(styles["fill"]), groupLevel, "none");
}
generatedOutput += generateAttr('fillAlpha', styles["fill-opacity"], groupLevel, "1");
generatedOutput += generateAttr('fillType', styles["fill-rule"], groupLevel, "nonZero");
generatedOutput += generateAttr('strokeColor', parseColorToHex(styles["stroke"]), groupLevel, "none");
if ((typeof styles["stroke"] !== "undefined") && styles["stroke"].startsWith("url(")) {
gradientID = styles["stroke"].slice(5, -1);
gradientAttr = "strokeColor";
} else {
generatedOutput += generateAttr('strokeColor', parseColorToHex(styles["stroke"]), groupLevel, "none");
}
generatedOutput += generateAttr('strokeAlpha', styles["stroke-opacity"], groupLevel, "1");
generatedOutput += generateAttr('strokeWidth', removeNonNumeric(styles["stroke-width"]), groupLevel, "0");
generatedOutput += generateAttr('strokeLineJoin', styles["stroke-linejoin"], groupLevel, "miter");
generatedOutput += generateAttr('strokeMiterLimit', styles["stroke-miterlimit"], groupLevel, "4");
generatedOutput += generateAttr('strokeLineCap', styles["stroke-linecap"], groupLevel, "butt");
generatedOutput += generateAttr('pathData', pathData, groupLevel, null, true);
if (gradientID !== null) {
generatedOutput += generateAttr('pathData', pathData, groupLevel, null);
generatedOutput += '>\n';
generatedOutput += INDENT.repeat(groupLevel + 2) + '<aapt:attr name="android:' + gradientAttr + '">\n';
generatedOutput += gradients[gradientID] + '\n';
generatedOutput += INDENT.repeat(groupLevel + 2) + '</aapt:attr>\n';
generatedOutput += INDENT.repeat(groupLevel + 1) + '</path>\n';
} else {
generatedOutput += generateAttr('pathData', pathData, groupLevel, null, true);
}
pathsParsedCount++;
} else {
clipPathMerged.push(pathData);
Expand All @@ -550,6 +576,39 @@ function printPath(pathData, stylesArray, groupLevel, clipPath) {
}
}

function parseGradients(svg) {
svg.find("defs").children().each(function () {
var current = $(this);
if (current.prop("tagName").endsWith("Gradient")) {
var androidXML = '<gradient\n';
androidXML += generateAttr('startX', current.attr("x1"), 1, "0");
androidXML += generateAttr('startY', current.attr("y1"), 1, "0");
androidXML += generateAttr('endX', current.attr("x2"), 1, "0");
androidXML += generateAttr('endY', current.attr("y2"), 1, "0");
if (current.prop("tagName").startsWith("linear")) {
androidXML += INDENT.repeat(1) + 'android:type="linear">';
} else if (current.prop("tagName").startsWith("radial")) {
androidXML += INDENT.repeat(1) + 'android:type="radial">';
}
current.children().each(function () {
var stopTag = $(this);
androidXML += INDENT.repeat(2) + '<item\n';
androidXML += generateAttr('offset', stopTag.attr("offset"), 3, null);
if (typeof stopTag.attr("stop-opacity") !== "undefined") {
var alpha = ("0" + Math.round(parseFloat(stopTag.attr("stop-opacity")) * 255).toString(16)).slice(-2)
var color = parseColorToHex(stopTag.attr("stop-color")).slice(-6)

androidXML += generateAttr('color', "#"+alpha+color, 3, null, true);
} else {
androidXML += generateAttr('color', parseColorToHex(stopTag.attr("stop-color")), 3, null, true);
}
});
androidXML += '</gradient>';
gradients[current.attr("id")] = androidXML;
}
});
}

function generateCode(inputXml) {
var resultData = { error:null, warnings:null, code:null };

Expand All @@ -569,7 +628,8 @@ function generateCode(inputXml) {
var svg = xml.find("svg");
globalSvg = svg;
preprocessReferences(svg);

parseGradients(svg);

if (toBool(localStorage.bakeTransforms)) {
try {
flatten(svg[0], false, true);
Expand All @@ -593,6 +653,7 @@ function generateCode(inputXml) {
//XML Vector start
generatedOutput = '<?xml version="1.0" encoding="utf-8"?>\n';
generatedOutput += '<vector xmlns:android="http://schemas.android.com/apk/res/android"';
generatedOutput += '\n' + INDENT + 'xmlns:aapt="http://schemas.android.com/aapt"'

generatedOutput += '\n' + INDENT + 'android:width="{0}dp"\n'.f(width);
generatedOutput += INDENT + 'android:height="{0}dp"\n'.f(height);
Expand Down Expand Up @@ -876,4 +937,4 @@ function showLastUpdate(repo) {
}
});
});
}
}

0 comments on commit 67231fb

Please sign in to comment.