Skip to content

Commit

Permalink
cv bezier curve point refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@bodymovin
bodymovin committed Dec 29, 2017
1 parent 194ab74 commit 06f6c44
Show file tree
Hide file tree
Showing 6 changed files with 103 additions and 84 deletions.
6 changes: 3 additions & 3 deletions player/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,16 +163,16 @@
container: elem,
renderer: 'svg',
loop: true,
autoplay: true,
autoplay: false,
rendererSettings: {
progressiveLoad:false,
},
path: 'exports/pigeon/data.json'
path: 'exports/catrim/data.json'
};
anim = lottie.loadAnimation(animData);
anim.addEventListener('DOMLoaded', function() {
//anim.setSubframe(false);
//setTimeout(function(){anim.play()}, 0);
setTimeout(function(){anim.play()}, 2000);
})
window.addEventListener('resize', function(){
anim.resize();
Expand Down
37 changes: 30 additions & 7 deletions player/js/3rd_party/transformation-matrix.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,15 +301,37 @@ var Matrix = (function(){
return retPts;
}

function applyToPointArray(x,y,z,dimensions){
if(dimensions && dimensions === 2) {
var arr = point_pool.newElement();
arr[0] = x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12];
arr[1] = x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13];
return arr;
function applyToTriplePoints(pt1, pt2, pt3) {
var arr = createTypedArray('float32', 6);
if(this.isIdentity()) {
arr[0] = pt1[0];
arr[1] = pt1[1];
arr[2] = pt2[0];
arr[3] = pt2[1];
arr[4] = pt3[0];
arr[5] = pt3[1];
} else {
var p0 = this.props[0], p1 = this.props[1], p4 = this.props[4], p5 = this.props[5], p12 = this.props[12], p13 = this.props[13]
arr[0] = pt1[0] * p0 + pt1[1] * p4 + p12;
arr[1] = pt1[0] * p1 + pt1[1] * p5 + p13;
arr[2] = pt2[0] * p0 + pt2[1] * p4 + p12;
arr[3] = pt2[0] * p1 + pt2[1] * p5 + p13;
arr[4] = pt3[0] * p0 + pt3[1] * p4 + p12;
arr[5] = pt3[0] * p1 + pt3[1] * p5 + p13;
}
return arr;
}

function applyToPointArray(x,y,z){
var arr;
if(this.isIdentity()) {
arr = [x,y,z];
} else {
arr = [x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14]];
}
return [x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14]];
return arr;
}

function applyToPointStringified(x, y) {
if(this.isIdentity()) {
return x + ',' + y;
Expand Down Expand Up @@ -362,6 +384,7 @@ var Matrix = (function(){
this.applyToY = applyToY;
this.applyToZ = applyToZ;
this.applyToPointArray = applyToPointArray;
this.applyToTriplePoints = applyToTriplePoints;
this.applyToPointStringified = applyToPointStringified;
this.toCSS = toCSS;
this.to2dCSS = to2dCSS;
Expand Down
16 changes: 6 additions & 10 deletions player/js/elements/canvasElements/CVMaskElement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ CVMaskElement.prototype.renderFrame = function (transform) {
}
var ctx = this.element.canvasContext;
var i, len = this.masksProperties.length;
var pt,pt2,pt3,data;
var pt,pts,data;
ctx.beginPath();
for (i = 0; i < len; i++) {
if(this.masksProperties[i].mode !== 'n'){
Expand All @@ -32,19 +32,15 @@ CVMaskElement.prototype.renderFrame = function (transform) {
ctx.lineTo(0, 0);
}
data = this.viewData[i].v;
pt = transform ? transform.applyToPointArray(data.v[0][0],data.v[0][1],0):data.v[0];
pt = transform.applyToPointArray(data.v[0][0],data.v[0][1],0);
ctx.moveTo(pt[0], pt[1]);
var j, jLen = data._length;
for (j = 1; j < jLen; j++) {
pt = transform ? transform.applyToPointArray(data.o[j - 1][0],data.o[j - 1][1],0) : data.o[j - 1];
pt2 = transform ? transform.applyToPointArray(data.i[j][0],data.i[j][1],0) : data.i[j];
pt3 = transform ? transform.applyToPointArray(data.v[j][0],data.v[j][1],0) : data.v[j];
ctx.bezierCurveTo(pt[0], pt[1], pt2[0], pt2[1], pt3[0], pt3[1]);
pts = transform.applyToTriplePoints(data.o[j - 1], data.i[j], data.v[j]);
ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]);
}
pt = transform ? transform.applyToPointArray(data.o[j - 1][0],data.o[j - 1][1],0) : data.o[j - 1];
pt2 = transform ? transform.applyToPointArray(data.i[0][0],data.i[0][1],0) : data.i[0];
pt3 = transform ? transform.applyToPointArray(data.v[0][0],data.v[0][1],0) : data.v[0];
ctx.bezierCurveTo(pt[0], pt[1], pt2[0], pt2[1], pt3[0], pt3[1]);
pts = transform.applyToTriplePoints(data.o[j - 1], data.i[0], data.v[0]);
ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]);
}
}
this.element.globalData.renderer.save(true);
Expand Down
119 changes: 61 additions & 58 deletions player/js/elements/canvasElements/CVShapeElement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,72 +219,53 @@ CVShapeElement.prototype.renderInnerContent = function() {
this.renderShape(this.transformHelper,this.shapesData,this.itemsData,true);
}

CVShapeElement.prototype.renderShape = function(parentTransform,items,data,isMain){
var i, len = items.length - 1;
var groupTransform,groupMatrix;
groupTransform = parentTransform;
for(i=len;i>=0;i-=1){
if(items[i].ty == 'tr'){
groupTransform = data[i].transform;
var mtArr = data[i].transform.mProps.v.props;
groupTransform._matMdf = groupTransform.mProps._mdf;
groupTransform._opMdf = groupTransform.op._mdf;
groupMatrix = groupTransform.mat;
groupMatrix.cloneFromProps(mtArr);
if(parentTransform){
var props = parentTransform.mat.props;
groupTransform.opacity = parentTransform.opacity;
groupTransform.opacity *= data[i].transform.op.v;
groupTransform._matMdf = parentTransform._matMdf || groupTransform._matMdf;
groupTransform._opMdf = parentTransform._opMdf || groupTransform._opMdf;
groupMatrix.transform(props[0],props[1],props[2],props[3],props[4],props[5],props[6],props[7],props[8],props[9],props[10],props[11],props[12],props[13],props[14],props[15]);
}else{
groupTransform.opacity = groupTransform.op.o;
}
}else if(items[i].ty == 'sh' || items[i].ty == 'el' || items[i].ty == 'rc' || items[i].ty == 'sr'){
this.renderPath(items[i],data[i],groupTransform);
}else if(items[i].ty == 'fl'){
this.renderFill(items[i],data[i],groupTransform);
}else if(items[i].ty == 'st'){
this.renderStroke(items[i],data[i],groupTransform);
}else if(items[i].ty == 'gr'){
this.renderShape(groupTransform,items[i].it,data[i].it);
}else if(items[i].ty == 'tm'){
//
}
CVShapeElement.prototype.renderShapeTransform = function(parentTransform, groupTransform) {
var props, groupMatrix;
if(parentTransform._opMdf || groupTransform.op._mdf || this._isFirstFrame) {
groupTransform.opacity = parentTransform.opacity;
groupTransform.opacity *= groupTransform.op.v;
groupTransform._opMdf = true;
}
if(!isMain){
return;
if(parentTransform._opMdf || groupTransform.op._mdf || this._isFirstFrame) {
groupMatrix = groupTransform.mat;
groupMatrix.cloneFromProps(groupTransform.mProps.v.props);
groupTransform._matMdf = true;
props = parentTransform.mat.props;
groupMatrix.transform(props[0],props[1],props[2],props[3],props[4],props[5],props[6],props[7],props[8],props[9],props[10],props[11],props[12],props[13],props[14],props[15]);
}
len = this.stylesList.length;
var j, jLen, k, kLen,elems,nodes, renderer = this.globalData.renderer, ctx = this.globalData.canvasContext, type;
}

CVShapeElement.prototype.drawLayer = function() {
var i, len = this.stylesList.length;
var j, jLen, k, kLen,elems,nodes, renderer = this.globalData.renderer, ctx = this.globalData.canvasContext, type, currentStyle;
for(i=0;i<len;i+=1){
type = this.stylesList[i].type;
if((type === 'st' && this.stylesList[i].wi === 0) || !this.stylesList[i].data._render){
currentStyle = this.stylesList[i];
type = currentStyle.type;
if((type === 'st' && currentStyle.wi === 0) || !currentStyle.data._render || currentStyle.coOp === 0){
continue;
}
renderer.save();
elems = this.stylesList[i].elements;
elems = currentStyle.elements;
if(type === 'st'){
ctx.strokeStyle = this.stylesList[i].co;
ctx.lineWidth = this.stylesList[i].wi;
ctx.lineCap = this.stylesList[i].lc;
ctx.lineJoin = this.stylesList[i].lj;
ctx.miterLimit = this.stylesList[i].ml || 0;
ctx.strokeStyle = currentStyle.co;
ctx.lineWidth = currentStyle.wi;
ctx.lineCap = currentStyle.lc;
ctx.lineJoin = currentStyle.lj;
ctx.miterLimit = currentStyle.ml || 0;
}else{
ctx.fillStyle = this.stylesList[i].co;
ctx.fillStyle = currentStyle.co;
}
renderer.ctxOpacity(this.stylesList[i].coOp);
renderer.ctxOpacity(currentStyle.coOp);
if(type !== 'st'){
ctx.beginPath();
}
jLen = elems.length;
for(j=0;j<jLen;j+=1){
if(type === 'st'){
ctx.beginPath();
if(this.stylesList[i].da){
ctx.setLineDash(this.stylesList[i].da);
ctx.lineDashOffset = this.stylesList[i].do;
if(currentStyle.da){
ctx.setLineDash(currentStyle.da);
ctx.lineDashOffset = currentStyle.do;
this.globalData.isDashed = true;
}else if(this.globalData.isDashed){
ctx.setLineDash(this.dashResetter);
Expand All @@ -298,7 +279,7 @@ CVShapeElement.prototype.renderShape = function(parentTransform,items,data,isMai
if(nodes[k].t == 'm'){
ctx.moveTo(nodes[k].p[0],nodes[k].p[1]);
}else if(nodes[k].t == 'c'){
ctx.bezierCurveTo(nodes[k].p1[0],nodes[k].p1[1],nodes[k].p2[0],nodes[k].p2[1],nodes[k].p3[0],nodes[k].p3[1]);
ctx.bezierCurveTo(nodes[k].pts[0],nodes[k].pts[1],nodes[k].pts[2],nodes[k].pts[3],nodes[k].pts[4],nodes[k].pts[5]);
}else{
ctx.closePath();
}
Expand All @@ -308,10 +289,36 @@ CVShapeElement.prototype.renderShape = function(parentTransform,items,data,isMai
}
}
if(type !== 'st'){
ctx.fill(this.stylesList[i].r);
ctx.fill(currentStyle.r);
}
renderer.restore();
}
}

CVShapeElement.prototype.renderShape = function(parentTransform,items,data,isMain){
var i, len = items.length - 1;
var groupTransform;
groupTransform = parentTransform;
for(i=len;i>=0;i-=1){
if(items[i].ty == 'tr'){
groupTransform = data[i].transform;
this.renderShapeTransform(parentTransform, groupTransform);
}else if(items[i].ty == 'sh' || items[i].ty == 'el' || items[i].ty == 'rc' || items[i].ty == 'sr'){
this.renderPath(items[i],data[i],groupTransform);
}else if(items[i].ty == 'fl'){
this.renderFill(items[i],data[i],groupTransform);
}else if(items[i].ty == 'st'){
this.renderStroke(items[i],data[i],groupTransform);
}else if(items[i].ty == 'gr'){
this.renderShape(groupTransform,items[i].it,data[i].it);
}else if(items[i].ty == 'tm'){
//
}
}
if(isMain){
this.drawLayer();
}

};
CVShapeElement.prototype.renderPath = function(pathData,itemData,groupTransform){
var len, i, j,jLen;
Expand All @@ -334,9 +341,7 @@ CVShapeElement.prototype.renderPath = function(pathData,itemData,groupTransform)
}
pathStringTransformed.push({
t: 'c',
p1: groupTransformMat.applyToPointArray(pathNodes.o[i - 1][0], pathNodes.o[i - 1][1], 0),
p2: groupTransformMat.applyToPointArray(pathNodes.i[i][0], pathNodes.i[i][1], 0),
p3: groupTransformMat.applyToPointArray(pathNodes.v[i][0], pathNodes.v[i][1], 0)
pts: groupTransformMat.applyToTriplePoints(pathNodes.o[i - 1], pathNodes.i[i], pathNodes.v[i])
});
}
if (len == 1) {
Expand All @@ -348,9 +353,7 @@ CVShapeElement.prototype.renderPath = function(pathData,itemData,groupTransform)
if (pathNodes.c && len) {
pathStringTransformed.push({
t: 'c',
p1: groupTransformMat.applyToPointArray(pathNodes.o[i - 1][0], pathNodes.o[i - 1][1], 0),
p2: groupTransformMat.applyToPointArray(pathNodes.i[0][0], pathNodes.i[0][1], 0),
p3: groupTransformMat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0)
pts: groupTransformMat.applyToTriplePoints(pathNodes.o[i - 1], pathNodes.i[0], pathNodes.v[0])
});
pathStringTransformed.push({
t: 'z'
Expand Down
4 changes: 2 additions & 2 deletions player/js/utils/shapes/RepeaterModifier.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@ RepeaterModifier.prototype.changeGroupRender = function(elements, renderFlag) {
}
}

RepeaterModifier.prototype.processShapes = function() {
if(this._mdf){
RepeaterModifier.prototype.processShapes = function(_isFirstFrame) {
if(this._mdf || _isFirstFrame){
var copies = Math.ceil(this.c.v);
if(this._groups.length < copies){
while(this._groups.length < copies){
Expand Down
5 changes: 1 addition & 4 deletions player/js/utils/shapes/TrimModifier.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ TrimModifier.prototype.releasePathsData = function(pathsData) {

TrimModifier.prototype.processShapes = function(_isFirstFrame) {

if (this._mdf) {
if (this._mdf || _isFirstFrame) {
var o = (this.o.v % 360) / 360;
if (o < 0) {
o += 1;
Expand Down Expand Up @@ -199,9 +199,6 @@ TrimModifier.prototype.processShapes = function(_isFirstFrame) {
this.shapes[i].shape._mdf = true;
}
}
if (!this.dynamicProperties.length) {
this._mdf = false;
}
}

TrimModifier.prototype.addPaths = function(newPaths, localShapeCollection) {
Expand Down

0 comments on commit 06f6c44

Please sign in to comment.