added support for masked strokes line cap and line join
diff --git a/player/index.html b/player/index.html
index 6f53dde..b17f656 100644
--- a/player/index.html
+++ b/player/index.html
@@ -12,7 +12,7 @@
}
#lottie{
- background-color:#ddd;
+ background-color:#000;
width:600px;
height:400px;
display:block;
@@ -32,6 +32,7 @@
<script src="js/utils/helpers/html_elements.js"></script>
<script src="js/utils/helpers/dynamicProperties.js"></script>
<script src="js/utils/helpers/blendModes.js"></script>
+ <script src="js/utils/helpers/shapeEnums.js"></script>
<script src="js/3rd_party/transformation-matrix.js"></script>
<script src="js/3rd_party/seedrandom.js"></script>
<script src="js/3rd_party/BezierEaser.js"></script>
diff --git a/player/js/elements/ShapeElement.js b/player/js/elements/ShapeElement.js
index bd829ca..84c25c7 100644
--- a/player/js/elements/ShapeElement.js
+++ b/player/js/elements/ShapeElement.js
@@ -42,16 +42,7 @@
}
}
},
- lcEnum: {
- 1: 'butt',
- 2: 'round',
- 3: 'square',
- },
- ljEnum: {
- 1: 'miter',
- 2: 'round',
- 3: 'bevel',
- },
+
searchProcessedElement: function (elem) {
var elements = this.processedElements;
var i = 0;
diff --git a/player/js/elements/canvasElements/CVShapeElement.js b/player/js/elements/canvasElements/CVShapeElement.js
index 5e56c82..22b6975 100644
--- a/player/js/elements/canvasElements/CVShapeElement.js
+++ b/player/js/elements/canvasElements/CVShapeElement.js
@@ -1,6 +1,6 @@
/* global ShapeTransformManager, extendPrototype, BaseElement, TransformElement, CVBaseElement, IShapeElement,
HierarchyElement, FrameElement, RenderableElement, RenderableDOMElement, PropertyFactory, degToRads, GradientProperty,
-DashProperty, TransformPropertyFactory, CVShapeData, ShapeModifiers, bmFloor */
+DashProperty, TransformPropertyFactory, CVShapeData, ShapeModifiers, bmFloor, lineCapEnum, lineJoinEnum */
function CVShapeElement(data, globalData, comp) {
this.shapes = [];
@@ -50,8 +50,8 @@
}
elementData.o = PropertyFactory.getProp(this, data.o, 0, 0.01, this);
if (data.ty === 'st' || data.ty === 'gs') {
- styleElem.lc = this.lcEnum[data.lc] || 'round';
- styleElem.lj = this.ljEnum[data.lj] || 'round';
+ styleElem.lc = lineCapEnum[data.lc || 2];
+ styleElem.lj = lineJoinEnum[data.lj || 2];
if (data.lj == 1) { // eslint-disable-line eqeqeq
styleElem.ml = data.ml;
}
diff --git a/player/js/elements/helpers/shapes/SVGGradientFillStyleData.js b/player/js/elements/helpers/shapes/SVGGradientFillStyleData.js
index fd75d73..9452eb5 100644
--- a/player/js/elements/helpers/shapes/SVGGradientFillStyleData.js
+++ b/player/js/elements/helpers/shapes/SVGGradientFillStyleData.js
@@ -1,5 +1,5 @@
/* global PropertyFactory, degToRads, GradientProperty, createElementID, createNS, locationHref,
-extendPrototype, DynamicPropertyContainer */
+extendPrototype, DynamicPropertyContainer, lineCapEnum, lineJoinEnum */
function SVGGradientFillStyleData(elem, data, styleOb) {
this.initDynamicPropertyContainer(elem);
@@ -38,7 +38,6 @@
stops.push(stop);
}
pathElement.setAttribute(data.ty === 'gf' ? 'fill' : 'stroke', 'url(' + locationHref + '#' + gradientId + ')');
-
this.gf = gfill;
this.cst = stops;
};
@@ -67,6 +66,13 @@
stops.push(stop);
}
maskElement.setAttribute(data.ty === 'gf' ? 'fill' : 'stroke', 'url(' + locationHref + '#' + opacityId + ')');
+ if (data.ty === 'gs') {
+ maskElement.setAttribute('stroke-linecap', lineCapEnum[data.lc || 2]);
+ maskElement.setAttribute('stroke-linejoin', lineJoinEnum[data.lj || 2]);
+ if (data.lj === 1) {
+ maskElement.setAttribute('stroke-miterlimit', data.ml);
+ }
+ }
this.of = opFill;
this.ms = mask;
this.ost = stops;
diff --git a/player/js/elements/htmlElements/HTextElement.js b/player/js/elements/htmlElements/HTextElement.js
index 96f7221..2e87a2c 100644
--- a/player/js/elements/htmlElements/HTextElement.js
+++ b/player/js/elements/htmlElements/HTextElement.js
@@ -1,5 +1,5 @@
/* global extendPrototype, BaseElement, TransformElement, HBaseElement, HierarchyElement, FrameElement,
-RenderableDOMElement, ITextElement, createSizedArray, createTag, styleDiv, createNS */
+RenderableDOMElement, ITextElement, createSizedArray, createTag, styleDiv, createNS, lineJoinEnum, lineCapEnum */
function HTextElement(data, globalData, comp) {
this.textSpans = [];
@@ -76,8 +76,8 @@
if (this.globalData.fontManager.chars) {
if (!this.textPaths[cnt]) {
tSpan = createNS('path');
- tSpan.setAttribute('stroke-linecap', 'butt');
- tSpan.setAttribute('stroke-linejoin', 'round');
+ tSpan.setAttribute('stroke-linecap', lineCapEnum[1]);
+ tSpan.setAttribute('stroke-linejoin', lineJoinEnum[2]);
tSpan.setAttribute('stroke-miterlimit', '4');
} else {
tSpan = this.textPaths[cnt];
diff --git a/player/js/elements/svgElements/SVGShapeElement.js b/player/js/elements/svgElements/SVGShapeElement.js
index db9ef01..29d9e74 100644
--- a/player/js/elements/svgElements/SVGShapeElement.js
+++ b/player/js/elements/svgElements/SVGShapeElement.js
@@ -1,7 +1,8 @@
/* global extendPrototype, BaseElement, TransformElement, SVGBaseElement, IShapeElement, HierarchyElement,
FrameElement, RenderableDOMElement, Matrix, SVGStyleData, SVGStrokeStyleData, SVGFillStyleData,
SVGGradientFillStyleData, SVGGradientStrokeStyleData, locationHref, getBlendMode, ShapeGroupData,
-TransformPropertyFactory, SVGTransformData, ShapePropertyFactory, SVGShapeData, SVGElementsRenderer, ShapeModifiers */
+TransformPropertyFactory, SVGTransformData, ShapePropertyFactory, SVGShapeData, SVGElementsRenderer, ShapeModifiers,
+lineCapEnum, lineJoinEnum */
function SVGShapeElement(data, globalData, comp) {
// List of drawable elements
@@ -98,8 +99,8 @@
}
if (data.ty === 'st' || data.ty === 'gs') {
- pathElement.setAttribute('stroke-linecap', this.lcEnum[data.lc] || 'round');
- pathElement.setAttribute('stroke-linejoin', this.ljEnum[data.lj] || 'round');
+ pathElement.setAttribute('stroke-linecap', lineCapEnum[data.lc || 2]);
+ pathElement.setAttribute('stroke-linejoin', lineJoinEnum[data.lj || 2]);
pathElement.setAttribute('fill-opacity', '0');
if (data.lj === 1) {
pathElement.setAttribute('stroke-miterlimit', data.ml);
diff --git a/player/js/utils/helpers/shapeEnums.js b/player/js/utils/helpers/shapeEnums.js
new file mode 100644
index 0000000..3833acb
--- /dev/null
+++ b/player/js/utils/helpers/shapeEnums.js
@@ -0,0 +1,13 @@
+/* exported lineCapEnum, lineJoinEnum */
+
+var lineCapEnum = {
+ 1: 'butt',
+ 2: 'round',
+ 3: 'square',
+};
+
+var lineJoinEnum = {
+ 1: 'miter',
+ 2: 'round',
+ 3: 'bevel',
+};
diff --git a/tasks/build.js b/tasks/build.js
index dd18108..14ccf55 100644
--- a/tasks/build.js
+++ b/tasks/build.js
@@ -40,6 +40,10 @@
builds: defaultBuilds
},
{
+ src: 'js/utils/helpers/shapeEnums.js',
+ builds: defaultBuilds
+ },
+ {
src: 'js/3rd_party/transformation-matrix.js',
builds: defaultBuilds
},
