When rotating a DL wall, in order to make the page's lighting respect the new angle, you have to manipulate the _path. And, since _path is read-only, you have to create a new path (presumably deleting the old one).
Here's a set of functions Aaron wrote to manipulate the _path for rotations:
function bounds(p){
return _.reduce(p,function(m,p){
m.minX=Math.min(p[1],m.minX);
m.minY=Math.min(p[2],m.minY);
m.maxX=Math.max(p[1],m.maxX);
m.maxY=Math.max(p[2],m.maxY);
return m;
},{minX:Infinity,maxX:0,minY:Infinity,maxY:0});
}
function center(bounds){
return {
x: bounds.minX + ((bounds.maxX-bounds.minX)/2),
y: bounds.minY + ((bounds.maxY-bounds.minY)/2)
};
}
function rotate(p,theta){
var b=bounds(p),
c=center(b),
sinT=Math.sin( theta*Math.PI/180.0),
cosT=Math.cos( theta*Math.PI/180.0),
newBounds={
minX:Infinity,
minY:Infinity,
maxX:0,
maxY:0
},
points =_.chain(p)
.map(function(point){
var pointPrime=_.clone(point);
pointPrime[1]=cosT*(point[1]-c.x) - sinT*(point[2]-c.y) + c.x;
pointPrime[2]=sinT*(point[1]-c.x) + cosT*(point[2]-c.y) + c.y;
newBounds.minX=Math.min(pointPrime[1],newBounds.minX);
newBounds.minY=Math.min(pointPrime[2],newBounds.minY);
newBounds.maxX=Math.max(pointPrime[1],newBounds.maxX);
newBounds.maxY=Math.max(pointPrime[2],newBounds.maxY);
return pointPrime;
})
.map(function(p){
p[1]-=newBounds.minX;
p[2]-=newBounds.minY;
return p;
})
.value(),
newCenter=center(newBounds);
return {
path: points,
bounds: newBounds,
center: newCenter,
offset: {
x: newCenter.x-c.x,
y: newCenter.y-c.y
}
};
}
So, given a path object
path and an angle
theta, you would use it like this:
var details = rotate(JSON.parse(path.get('path')), theta);
createObj('path', {
pageid: path.get('pageid'),
fill: path.get('fill'),
stroke: path.get('stroke'),
rotation: path.get('rotation'),
layer: path.get('layer'),
stroke_width: path.get('stroke_width'),
width: details.bounds.maxX - details.bounds.minX,
height: details.bounds.maxY - details.bounds.minY,
path: JSON.stringify(details.path),
top: path.get('top') + details.offset.y,
left: path.get('left') + details.offset.x,
scaleX: 1,
scaleY: 1
});
path.remove();
From there it's simply a matter of rotating the path on a set interval using
setInterval(func, delay).
Note: The above rotation function only works correctly for polygons and polylines. Circles, ovals, and freehand drawings get
really funky if you try to rotate them with it (because it's not also moving their curve control points correctly). However, freehand drawings are not usable on the DL layer through the interface, and circles/ovals don't operate correctly with the page's lighting anyway, so that shouldn't be a huge issue.