Created
August 23, 2012 19:03
-
-
Save bjnsn/3440359 to your computer and use it in GitHub Desktop.
Encode a path into compact EaselJS format using EaselJS/Canvas path commands
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* The reverse of the EaselJS Graphics.decode method for | |
* compactly encoding paths. | |
* | |
* @author Brett Johnson, periscopic.com | |
* | |
* @example | |
* var ep = new EncodePath(); | |
* ep.moveTo(-150, 0).lineTo(150, 0); | |
* var shp = new Shape(); | |
* shp.graphics.decode(ep.code); //draws line from -150,0 to 150,0 | |
**/ | |
var EncodePath = (function(){ | |
var MAX_CHAR2 = 204.7; | |
var BASE_64 = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9','+','/']; | |
function encodeMethod(methodInt, numChars) { | |
return BASE_64[(methodInt<<3) | ((numChars===3?1:0)<<2)]; | |
} | |
function encodeNum2(num) { | |
var val = Math.round(Math.abs(num)*10) | ((num>=0?0:1)<<11); | |
return BASE_64[val>>6] + BASE_64[val & 63]; | |
} | |
function encodeNum3(num) { | |
var val = Math.round(Math.abs(num)*10) | ((num>=0?0:1)<<17); | |
return BASE_64[(val>>12)&63] + BASE_64[(val>>6)&63] + BASE_64[val & 63]; | |
} | |
function EncodePath() {} | |
var p = EncodePath.prototype; | |
p._x = 0; | |
p._y = 0; | |
p.code = ''; | |
p.moveTo = function( x, y) { | |
if(Math.abs(x)<=MAX_CHAR2 && Math.abs(y)<=MAX_CHAR2){ | |
this.code += encodeMethod(0, 2) + encodeNum2(x) + encodeNum2(y); | |
}else { | |
this.code += encodeMethod(0, 3) + encodeNum3(x) + encodeNum3(y); | |
} | |
this._x = x; | |
this._y = y; | |
return this; | |
} | |
p.lineTo = function( x, y) { | |
var numChars, encodeNum; | |
if(Math.abs(x-this._x)<=MAX_CHAR2 && Math.abs(y-this._y)<=MAX_CHAR2) | |
{ | |
numChars = 2; | |
encodeNum= encodeNum2; | |
}else { | |
numChars = 3; | |
encodeNum = encodeNum3; | |
} | |
this.code += encodeMethod(1, numChars) + encodeNum(x-this._x) + encodeNum(y-this._y); | |
this._x = x; | |
this._y = y; | |
return this; | |
}; | |
p.quadraticCurveTo = function( x1, y1, x2, y2) { | |
var numChars, encodeNum; | |
if(Math.abs(x1-this._x)<=MAX_CHAR2 && Math.abs(y1-this._y)<=MAX_CHAR2 && | |
Math.abs(x2-x1)<=MAX_CHAR2 && Math.abs(y2-y1)<=MAX_CHAR2) | |
{ | |
numChars = 2; | |
encodeNum = encodeNum2; | |
}else { | |
numChars = 3; | |
encodeNum = encodeNum3; | |
} | |
this.code += encodeMethod(2, numChars) + encodeNum(x1-this._x) + encodeNum(y1-this._y) + | |
encodeNum(x2-x1) + encodeNum(y2-y1); | |
this._x = x2; | |
this._y = y2; | |
return this; | |
} | |
//-- cubic | |
p.bezierCurveTo = function( x1, y1, x2, y2, x3, y3) { | |
var numChars, encodeNum; | |
if(Math.abs(x1-this._x)<=MAX_CHAR2 && Math.abs(y1-this._y)<=MAX_CHAR2 && | |
Math.abs(x2-x1)<=MAX_CHAR2 && Math.abs(y2-y1)<=MAX_CHAR2 && | |
Math.abs(x3-x2)<=MAX_CHAR2 && Math.abs(y3-y2)<=MAX_CHAR2) | |
{ | |
numChars = 2; | |
encodeNum = encodeNum2; | |
}else { | |
numChars = 3; | |
encodeNum = encodeNum3; | |
} | |
this.code += encodeMethod(3, numChars) + encodeNum(x1-this._x) + encodeNum(y1-this._y) + | |
encodeNum(x2-x1) + encodeNum(y2-y1) + | |
encodeNum(x3-x2) + encodeNum(y3-y2); | |
this._x = x3; | |
this._y = y3; | |
return this; | |
} | |
p.clear = function() { | |
this.code = ''; | |
this._x = this._y = 0; | |
return this; | |
} | |
return EncodePath; | |
})() |
If i want to know what process in decode path like "AhLAJIAAgRICXAAIAAARg" without use flash cc.
can use this?
===========================================
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#FFFFFF").s().p("AhLAJIAAgRICXAAIAAARg");
this.shape.setTransform(7.7,0);
same question!!!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If i want to know what process in decode path like "AhLAJIAAgRICXAAIAAARg" without use flash cc.
can use this?
===========================================
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#FFFFFF").s().p("AhLAJIAAgRICXAAIAAARg");
this.shape.setTransform(7.7,0);