{"_id":"@amiraslanaslani/canvas-drawer","_rev":"1-cc7a85bab394b4d87abca1614f74d195","name":"@amiraslanaslani/canvas-drawer","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@amiraslanaslani/canvas-drawer","version":"0.1.0","description":"Minimal WebGL-based 2D visualization library ","main":"dist/CanvasDrawer.min.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","compile":"node scripts/compile.js"},"repository":{"type":"git","url":"git+https://github.com/amiraslanaslani/canvas-drawer.git"},"keywords":["webgl","2d","library","canvas"],"author":{"name":"Amir Aslan Aslani"},"license":"Apache-2.0","bugs":{"url":"https://github.com/amiraslanaslani/canvas-drawer/issues"},"homepage":"https://github.com/amiraslanaslani/canvas-drawer#readme","dependencies":{"earcut":"^2.2.2","jquery":"^3.5.1"},"devDependencies":{"jsdoc-to-markdown":"^6.0.1","mustache":"^4.0.1","terser":"^5.2.0","chalk":"^4.1.0"},"directories":{"doc":"docs"},"gitHead":"b5a88d2bcdb6cf8bcc8ecc76bb78ef8222dcd0f9","_id":"@amiraslanaslani/canvas-drawer@0.1.0","_nodeVersion":"14.12.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-ztHq5xvy0MdEWDClto4e1zOJy0WLUu+e3NqqgiKptW1ZCtC5YXde9K7Bw+bmvBz+IprSdcLKfoa27LjE57pq4g==","shasum":"2c70e126c34c4e9615cb147d76a5f5c22dca1a2a","tarball":"https://registry.npmjs.org/@amiraslanaslani/canvas-drawer/-/canvas-drawer-0.1.0.tgz","fileCount":30,"unpackedSize":859763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmJEoCRA9TVsSAnZWagAAO3MP/AhqCv37JTBAY27EeZ+h\nFjjGPbDBGzGA82ufd+aBTrOzgLdcR0iMkvRV41agGwK34sktySCgMuELB6Fx\nh1oPCRhfp3iAjH27Ep6fgqduwaJqvEXWxrp3VOZW1KjCeXw8a9lOZI/kuqY9\n3t487cxhf8x09MK32g/ldla3ZvMyKtaccjVujgJKMe5G/BrpteN8E8Y4lIoa\nyE0ZlbVyQbGFxb8APEFGa0MDtS/bs5k6tRI9e1hdzWmb11dJOyzR5dEvFR4j\nu9NfA4XXX6KHAXXUfkwxHrBp7SDjGlnEoqHlrPFnOjN2YVv2Q0AcGEleSIi0\nCNu2H73+iotcy0B2sWxuqHQ9kZSJGRSAaVRTUAbqSnri7/zlb7bcDVdsfhaI\nCbGtPzIVL4yZVhu3+O1TXIsJnstTwGhxZQH7wZv3/y4vPQWm5767JshQBw7t\noabbsrWbZFvTlHs1zzSBA1nm9aKQvFueEL45IuRcGNk9oHbh+BzZokV2o7Sn\n6oBzgihKw9QmHTfl8s8aT697bgrOfZaK8/Ab8eHiASaqY3BHBvslAGYUihZ4\nthVgI6ehdiDqmNRUsphZwIvYbqekOL4Hcl72Xudu2TqRQbQmN4bTvLaKhi8/\n1M2ibuPF70fgZlrycZ9Ey3erMkitq7TE+1JwFoGSYG1zy996XHN0tgv8hX9Z\nKKLK\r\n=MT5V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDarT+o7BNLAbF2FzAkQyGLILZZAPcQCB46R7IR1TeOEwIgNlg7+QtNpYBfVTH0xsGfZVnYcSZuT7GiR0DcyxsiAo4="}]},"maintainers":[{"name":"amiraslanaslani","email":"aa.aslani_6@yahoo.com"}],"_npmUser":{"name":"amiraslanaslani","email":"aa.aslani_6@yahoo.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/canvas-drawer_0.1.0_1603834151963_0.3664986860029875"},"_hasShrinkwrap":false}},"time":{"created":"2020-10-27T21:29:11.897Z","0.1.0":"2020-10-27T21:29:12.156Z","modified":"2022-04-04T13:49:32.070Z"},"maintainers":[{"name":"amiraslanaslani","email":"aa.aslani_6@yahoo.com"}],"description":"Minimal WebGL-based 2D visualization library ","homepage":"https://github.com/amiraslanaslani/canvas-drawer#readme","keywords":["webgl","2d","library","canvas"],"repository":{"type":"git","url":"git+https://github.com/amiraslanaslani/canvas-drawer.git"},"author":{"name":"Amir Aslan Aslani"},"bugs":{"url":"https://github.com/amiraslanaslani/canvas-drawer/issues"},"license":"Apache-2.0","readme":"# Canvas Drawer\nMinimal WebGL-based 2D visualization library \n\n## Read in other languages\n- [Persian فارسی](docs/README.fa.md)\n\n## What is it useful for?\n- It is useful for those who want to draw shapes with some colors and textures on canvas.\n- If you want to zoom in/out or move drawn data then Canvas Drawer provides this feature.\n- The main purpose of this program is to visualization a huge amount of shapes that don't overlap with each other on canvas. If some of your data have overlap with each other then maybe you get in trouble with your view after zoom in/out or moving over shapes. However, if you don't use these features, there will be no problem.\n\n## Requirements\nThis program uses these libraries:\n- [Earcut](https://github.com/mapbox/earcut) for polygon triangulation\n- [JQuery](https://github.com/jquery/jquery)\n\n## Documents created by JSDocs\nDocuments of each file and each function of that can accessible from these links:\n\n- [CanvasDrawer](docs/jsdoc/CanvasDrawer.md)\n- [Cartographer](docs/jsdoc/Cartographer.md)\n- [Drawer](docs/jsdoc/Drawer.md)\n- [Historian](docs/jsdoc/Historian.md)\n- [HistoryManager](docs/jsdoc/HistoryManager.md)\n- [PositionMaker](docs/jsdoc/PositionMaker.md)\n\nA lot of thanks to [jsdoc-to-markdown](https://github.com/jsdoc2md/jsdoc-to-markdown) for creating these files.\n\n## How to use\nAlways we should add dependencies at first:\n```\n<script src=\"../node_modules/jquery/dist/jquery.min.js\"></script>\n<script src=\"../node_modules/earcut/src/earcut.js\"></script>\n```\n\nNow we can add our program's script to the page:\n```\n<script src=\"../dist/CanvasDrawer.min.js\"></script>\n```\n\nNow we are ready to draw on a ``<canvas>``. So we add a ``<canvas>`` to our page:\n```\n<canvas id=\"myCanvas\" width=\"1000\" height=\"700\"></canvas>\n``` \n\n### Initialization\nIt's so simple and beautiful!\n```\nvar cd = new CanvasDrawer({\n    'id': 'myCanvas',\n    'errorFunction': ()=>alert(\"You can't load WebGL right now\"),\n    'cartographer': true\n});\n```\nFor more detailed information on how to enter information, you can refer to the [CanvasDrawer](docs/jsdoc/CanvasDrawer.md) documentation file. But I will explain some more important cases here:\n\nvalue of `id` is equaled with the id attribute of our canvas element.\n\n``ErrorFunction`` is a function that is called when it is not possible to load WebGL.\n\nThe ``cartographer`` receives a ``boolean`` value and Specifies zoom in/out and dragging be active or not.\n\n### Drawing\nI will explain the following commands step by step:\n```\ncd.loadTextures(textures, (data) => {\n    cd.drawer.setTextureEnable();\n    cd.drawer.setTextureResolution(512, 512);\n    cd.drawer.setUseTexture(data['images/a.jpg']);\n    cd.addPolygon([0,0, 256,0, 256,256, 0,256]);\n    cd.justDraw();\n\n    cd.drawer.setTextureUserTranslation(128, 128);\n    cd.drawer.setTextureResolution(768, 768);\n    cd.drawer.setUseTexture(data['images/b.jpg']);\n    cd.addPolygon([128,128, 512,128, 512,512, 128,512]);\n    cd.justDraw();\n\n    cd.drawer.setColorEnable();\n    cd.addCircle(250,250,50,15);\n    cd.draw(1,0,0,1);\n});\n```\n\nHere are some important points:\n- ``cd.drawer`` is an ``Object`` that manages out interaction with WebGL.\n- If we want to use any texture we should load that texture to one of the Texture Units. Any Texture Unit identified with a unique integer.\n\nThe ``cd.loadTextures( textures, data => {...} )`` function takes two values as input. The first one is the list of URLs for the images we want to use as Texture. The second one is a callback function that is called after all images have been loaded in units, and an associative array is passed as an argument to the function.\n\n`` cd.drawer.setTextureEnable()`` specifies that the shape I am drawing now is supposed to have a texture. Also `` cd.drawer.setColorEnable()`` specifies that the shape I am drawing now is supposed to have a color.\n\nThe ``cd.drawer.setTextureResolution(512, 512)`` function specifies that the resolution of texture is 512x512.\n\n``cd.drawer.setUseTexture(data['images/b.jpg'])`` specifies which Texture we want to use. `` data`` is a map from the URL of the texture file to the unit number where that texture was loaded.\n\n``cd.addPolygon([0,0, 256,0, 256,256, 0,256])`` Triangulates a square with specified coordinates and keeps triangles coordinates in the memory.\n\n``cd.just Draw`` draws all the triangles that are still in memory.\n\n‍‍``cd.draw`` is similar to `` cd.justDraw`` except that we define what we want to draw to be red. The four input parameters of this function specify the values of r, g, b and a.\n\n## For developers\nIf you want to develope this program, there are some tips I want to share with you.\n\n### Compile script\nprobably you change some things in the program and you want to create distribution files and update documents that are created from JSDocs.\n\nJust run compile script:\n\n```npm run compile```\n\n## License\nReleased under the [Apache license 2.0](LICENSE.md)\n","readmeFilename":"README.md"}