diff options
Diffstat (limited to 'assets/canvas-runtime.js')
-rw-r--r-- | assets/canvas-runtime.js | 243 |
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 | // ************************************************************************** | ||
1815 | NinjaCvsRt.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 | |||
1913 | NinjaCvsRt.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; | ||