aboutsummaryrefslogtreecommitdiff
path: root/assets/canvas-runtime.js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/canvas-runtime.js')
-rw-r--r--assets/canvas-runtime.js243
1 files changed, 243 insertions, 0 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index af860b95..4fb0a327 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -378,6 +378,10 @@ NinjaCvsRt.GLRuntime = Object.create(Object.prototype, {
378 obj.importJSON( jObj ); 378 obj.importJSON( jObj );
379 break; 379 break;
380 380
381 case 5: //subpath (created by pen tool)
382 obj = Object.create(NinjaCvsRt.RuntimeSubPath, {_materials: { value:[], writable:true}});
383 obj.importJSON (jObj );
384 break;
381 default: 385 default:
382 throw new Error( "Attempting to load unrecognized object type: " + type ); 386 throw new Error( "Attempting to load unrecognized object type: " + type );
383 break; 387 break;
@@ -1804,3 +1808,242 @@ NinjaCvsRt.RuntimePlasmaMaterial = Object.create(NinjaCvsRt.RuntimeMaterial, {
1804}); 1808});
1805 1809
1806 1810
1811
1812// **************************************************************************
1813// Runtime for the pen tool path
1814// **************************************************************************
1815NinjaCvsRt.AnchorPoint = Object.create(Object.prototype, {
1816 /////////////////////////////////////////
1817 // Instance variables
1818 /////////////////////////////////////////
1819 _x: {value: 0.0, writable: true},
1820 _y: {value: 0.0, writable: true},
1821 _z: {value: 0.0, writable: true},
1822
1823 _prevX: {value: 0.0, writable: true},
1824 _prevY: {value: 0.0, writable: true},
1825 _prevZ: {value: 0.0, writable: true},
1826
1827 _nextX: {value: 0.0, writable: true},
1828 _nextY: {value: 0.0, writable: true},
1829 _nextZ: {value: 0.0, writable: true},
1830
1831 // *********** setters ************
1832 setPos: {
1833 value: function(x,y,z){
1834 this._x = x;
1835 this._y = y;
1836 this._z = z;
1837 }
1838 },
1839
1840 setPrevPos: {
1841 value: function (x, y, z) {
1842 this._prevX = x;
1843 this._prevY = y;
1844 this._prevZ = z;
1845 }
1846 },
1847
1848 setNextPos: {
1849 value: function (x, y, z) {
1850 this._nextX = x;
1851 this._nextY = y;
1852 this._nextZ = z;
1853 }
1854 },
1855
1856 // *************** getters ******************
1857 // (add as needed)
1858 getPosX: {
1859 value: function () {
1860 return this._x;
1861 }
1862 },
1863
1864 getPosY: {
1865 value: function () {
1866 return this._y;
1867 }
1868 },
1869
1870 getPosZ: {
1871 value: function () {
1872 return this._z;
1873 }
1874 },
1875
1876 getPrevX: {
1877 value: function () {
1878 return this._prevX;
1879 }
1880 },
1881
1882 getPrevY: {
1883 value: function () {
1884 return this._prevY;
1885 }
1886 },
1887
1888 getPrevZ: {
1889 value: function () {
1890 return this._prevZ;
1891 }
1892 },
1893
1894 getNextX: {
1895 value: function () {
1896 return this._nextX;
1897 }
1898 },
1899
1900 getNextY: {
1901 value: function () {
1902 return this._nextY;
1903 }
1904 },
1905
1906 getNextZ: {
1907 value: function () {
1908 return this._nextZ;
1909 }
1910 }
1911});
1912
1913NinjaCvsRt.RuntimeSubPath = Object.create(NinjaCvsRt.RuntimeGeomObj, {
1914 // array of anchor points
1915 _Anchors: { value: null, writable: true },
1916
1917 //path properties
1918 _isClosed: {value: false, writable: true},
1919 _strokeWidth: {value: 0, writable: true},
1920 _strokeColor: {value: null, writable: true},
1921 _fillColor: {value: null, writable: true},
1922
1923 geomType: {
1924 value: function () {
1925 return this.GEOM_TYPE_CUBIC_BEZIER;
1926 }
1927 },
1928
1929 importJSON: {
1930 value: function(jo) {
1931 if (this.geomType()!== jo.geomType){
1932 return;
1933 }
1934 //the geometry for this object
1935 this._Anchors = [];
1936 var i=0;
1937 for (i=0;i<jo.anchors.length;i++){
1938 var newAnchor = Object.create(NinjaCvsRt.AnchorPoint);
1939 var ipAnchor = jo.anchors[i];
1940 newAnchor.setPos(ipAnchor._x, ipAnchor._y, ipAnchor._z);
1941 newAnchor.setPrevPos(ipAnchor._prevX, ipAnchor._prevY, ipAnchor._prevZ);
1942 newAnchor.setNextPos(ipAnchor._nextX, ipAnchor._nextY, ipAnchor._nextZ);
1943 this._Anchors.push(newAnchor);
1944 }
1945 this._isClosed = jo.isClosed;
1946
1947 //stroke appearance properties
1948 this._strokeWidth = jo.strokeWidth;
1949 this._strokeColor = jo.strokeColor;
1950 this._fillColor = jo.fillColor;
1951 }
1952 },
1953
1954 //buildColor returns the fillStyle or strokeStyle for the Canvas 2D context
1955 buildColor: {
1956 value: function(ctx, //the 2D rendering context (for creating gradients if necessary)
1957 ipColor, //color string, also encodes whether there's a gradient and of what type
1958 w, //width of the region of color
1959 h, //height of the region of color
1960 lw) //linewidth (i.e. stroke width/size)
1961 {
1962 if (ipColor.gradientMode){
1963 var position, gradient, cs, inset; //vars used in gradient calculations
1964 inset = Math.ceil( lw ) - 0.5;
1965
1966 if(ipColor.gradientMode === "radial") {
1967 var ww = w - 2*lw, hh = h - 2*lw;
1968 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
1969 } else {
1970 gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2);
1971 }
1972 var colors = ipColor.color;
1973
1974 var len = colors.length;
1975 for(n=0; n<len; n++) {
1976 position = colors[n].position/100;
1977 cs = colors[n].value;
1978 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
1979 }
1980 return gradient;
1981 } else {
1982 var c = "rgba(" + 255*ipColor[0] + "," + 255*ipColor[1] + "," + 255*ipColor[2] + "," + ipColor[3] + ")";
1983 return c;
1984 }
1985 }
1986 },
1987
1988 render: {
1989 value: function() {
1990 // get the world
1991 var world = this.getWorld();
1992 if (!world) {
1993 throw( "null world in subpath render" );
1994 return;
1995 }
1996
1997 // get the context
1998 var ctx = world.get2DContext();
1999 if (!ctx) {
2000 throw( "null world in subpath render" );
2001 return;
2002 }
2003
2004 //vars used for the gradient computation in buildColor
2005 var w = world.getViewportWidth(), h = world.getViewportHeight();
2006
2007 ctx.save();
2008 ctx.lineWidth = this._strokeWidth;
2009 ctx.strokeStyle = "black";
2010 if (this._strokeColor) {
2011 ctx.strokeStyle = this.buildColor(ctx, this._strokeColor, w,h, this._strokeWidth);
2012 }
2013
2014 ctx.fillStyle = "white";
2015 if (this._fillColor){
2016 ctx.fillStyle = this.buildColor(ctx, this._fillColor, w,h, this._strokeWidth);
2017 }
2018 var lineCap = ['butt','round','square'];
2019 ctx.lineCap = lineCap[1];
2020 var lineJoin = ['round','bevel','miter'];
2021 ctx.lineJoin = lineJoin[0];
2022
2023 var numAnchors = this._Anchors.length;
2024 if (numAnchors>1) {
2025 ctx.beginPath();
2026 var prevAnchor = this._Anchors[0];
2027 ctx.moveTo(prevAnchor.getPosX(),prevAnchor.getPosY());
2028 for (var i = 1; i < numAnchors; i++) {
2029 var currAnchor = this._Anchors[i];
2030 ctx.bezierCurveTo(prevAnchor.getNextX(),prevAnchor.getNextY(), currAnchor.getPrevX(), currAnchor.getPrevY(), currAnchor.getPosX(), currAnchor.getPosY());
2031 prevAnchor = currAnchor;
2032 }
2033 if (this._isClosed === true) {
2034 var currAnchor = this._Anchors[0];
2035 ctx.bezierCurveTo(prevAnchor.getNextX(),prevAnchor.getNextY(), currAnchor.getPrevX(), currAnchor.getPrevY(), currAnchor.getPosX(), currAnchor.getPosY());
2036 prevAnchor = currAnchor;
2037 }