aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--assets/canvas-runtime.js207
-rwxr-xr-xjs/components/tools-properties/pen-properties.reel/pen-properties.js27
-rwxr-xr-xjs/data/tools-data.js4
-rwxr-xr-xjs/helper-classes/3D/math-utils.js11
-rwxr-xr-xjs/lib/geom/brush-stroke.js93
-rwxr-xr-xjs/lib/geom/sub-path.js308
-rwxr-xr-xjs/mediators/keyboard-mediator.js7
-rw-r--r--js/tools/BrushTool.js14
-rwxr-xr-xjs/tools/PenTool.js355
9 files changed, 766 insertions, 260 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index af860b95..3ed7ed0f 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,206 @@ 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 render: {
1955 value: function() {
1956 // get the world
1957 var world = this.getWorld();
1958 if (!world) {
1959 throw( "null world in subpath render" );
1960 return;
1961 }
1962
1963 // get the context
1964 var ctx = world.get2DContext();
1965 if (!ctx) {
1966 throw( "null world in subpath render" );
1967 return;
1968 }
1969
1970 ctx.save();
1971 ctx.lineWidth = this._strokeWidth;
1972 ctx.strokeStyle = "black";
1973 if (this._strokeColor) {
1974 var strokeColorStr = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")";
1975 ctx.strokeStyle = strokeColorStr;
1976 }
1977
1978 ctx.fillStyle = "white";
1979 if (this._fillColor){
1980 var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")";
1981 ctx.fillStyle = fillColorStr;
1982 }
1983 var lineCap = ['butt','round','square'];
1984 ctx.lineCap = lineCap[1];
1985 var lineJoin = ['round','bevel','miter'];
1986 ctx.lineJoin = lineJoin[0];
1987
1988 var numAnchors = this._Anchors.length;
1989 if (numAnchors>1) {
1990 ctx.beginPath();
1991 var prevAnchor = this._Anchors[0];
1992 ctx.moveTo(prevAnchor.getPosX(),prevAnchor.getPosY());
1993 for (var i = 1; i < numAnchors; i++) {
1994 var currAnchor = this._Anchors[i];
1995 ctx.bezierCurveTo(prevAnchor.getNextX(),prevAnchor.getNextY(), currAnchor.getPrevX(), currAnchor.getPrevY(), currAnchor.getPosX(), currAnchor.getPosY());
1996 prevAnchor = currAnchor;
1997 }
1998 if (this._isClosed === true) {
1999 var currAnchor = this._Anchors[0];
2000 ctx.bezierCurveTo(prevAnchor.getNextX(),prevAnchor.getNextY(), currAnchor.getPrevX(), currAnchor.getPrevY(), currAnchor.getPosX(), currAnchor.getPosY());
2001 prevAnchor = currAnchor;
2002 }
2003 ctx.fill();
2004 ctx.stroke();
2005 }
2006 ctx.restore();
2007 }
2008 }
2009});// **************************************************************************
2010// END runtime for the pen tool path
2011// **************************************************************************
2012
2013
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.js b/js/components/tools-properties/pen-properties.reel/pen-properties.js
index cd205e07..c37359e1 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.js
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.js
@@ -9,6 +9,17 @@ var ToolProperties = require("js/components/tools-properties/tool-properties").T
9 9
10var PenProperties = exports.PenProperties = Montage.create(ToolProperties, { 10var PenProperties = exports.PenProperties = Montage.create(ToolProperties, {
11 addedColorChips: { value: false }, 11 addedColorChips: { value: false },
12 _penToolRadio: { value: null, enumerable: false },