{"_id":"@b-stud/bezier-canvas","_rev":"1-ba2b28c38d23b9edb817888216a09da1","name":"@b-stud/bezier-canvas","description":"Transform an HTML5 canvas into a Bezier drawing surface, import & export splines, custom view.","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@b-stud/bezier-canvas","version":"1.0.0","description":"Transform an HTML5 canvas into a Bezier drawing surface, import & export splines, custom view.","keywords":["b-stud bstud @bstud @b-stud bezier canvas"],"main":"dist/bezier-canvas.min.js","scripts":{"build":"webpack"},"author":{"name":"Bilel OURAL","email":"bilel.oural@b-stud.com","url":"http://www.b-stud.com"},"repository":{"type":"git","url":"git+https://github.com/b-stud/bezier-canvas.git"},"license":"SEE LICENSE IN LICENSE.md","devDependencies":{"@types/node":"^8.0.47","bower":"^1.8.2","ts-loader":"^3.1.1","tslint":"^5.8.0","tslint-loader":"^3.5.3","typescript":"^2.6.1","webpack":"^3.8.1"},"dependencies":{},"gitHead":"075a94457c4ecda3be255107e73a94a656bd61bc","bugs":{"url":"https://github.com/b-stud/bezier-canvas/issues"},"homepage":"https://github.com/b-stud/bezier-canvas#readme","_id":"@b-stud/bezier-canvas@1.0.0","_npmVersion":"5.5.1","_nodeVersion":"6.9.5","_npmUser":{"name":"b-stud","email":"bilel.oural@yahoo.fr"},"dist":{"integrity":"sha512-OqubB5wuOZW2ZnR664nkZz3RXydaMv2nSmPAh1PiXgTGAeGuA30GqG1z5v8D3p7FHKgQQiF/PDrXVtoyACYo/Q==","shasum":"53f44656f7f1400a53454d17f344ca33bda50eef","tarball":"https://registry.npmjs.org/@b-stud/bezier-canvas/-/bezier-canvas-1.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEFUNVfEv9QRl7kjxLq/KYJlY0yRSzI3xDBTBdh6kdy+AiB9S2yZVTdI8VwgKUNJcesTK0VNP5JF8wAs4gYfQop5hw=="}]},"maintainers":[{"name":"b-stud","email":"bilel.oural@yahoo.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/bezier-canvas-1.0.0.tgz_1514968719970_0.9723711819387972"}}},"readme":"# Bezier Canvas\r\n\r\n[1. Introduction](#1-introduction)
\r\n[2. Compilation process](#2-compilation-process)
\r\n[3. Loading the library](#3-loading-the-library)
\r\n[4. Usage](#4-usage)
\r\n[5. Options](#5-options)
\r\n[6. Public API](#6-public-api)
\r\n[7. License](#7-license)
\r\n[8. Author](#8-author)
\r\n\r\n## 1. Introduction\r\nBezier Canvas library transforms any HTML5 canvas into a Bezier drawing surface.\r\nWith 2 distinct drawing modes, you will be able to draw 'natural'\r\nsplines like with the Photoshop pencil tool, or, to draw\r\npure Bezier splines the classical way with the default mode.\r\n\r\nMoreover, you will also be able to export the current spline and import it back later using a JSON format.\r\n\r\nFinally the public API lets you walk along the spline and put shapes (or anything you wish) at regular distanced positions.\r\n\r\n\r\n\r\n## 2. Compilation process\r\nWritten in Typescript and packaged with Webpack, the library is delivered with a ready to use javascript file.\r\nHowever, you could want to make changes and build it again.\r\n\r\nFirst of all you will need to install [the NodeJS Framework](https://nodejs.org/en/). Then, you will need to install\r\nrequired dependencies by running the following instructions :\r\n\r\n```bash\r\n# Navigate to the library directory\r\ncd bezier-canvas\r\n\r\n# Installing dependencies\r\nnpm install\r\n```\r\n\r\nThen to trigger the build process :\r\n```bash\r\nnpm run-script build\r\n```\r\n\r\n\r\n## 3. Loading the library\r\n\r\nThe library is packed using the \"Universal Module Definition\" scheme. You can then include it into various javascript contexts :\r\n\r\n* Vanilla JS\r\n```html\r\n\r\n...\r\n\r\n...\r\n\r\n...\r\n\r\n\r\n...\r\n```\r\n\r\n* Require JS\r\n```html\r\n\r\n...\r\n\r\n...\r\n\r\n...\r\n\r\n\r\n```\r\n\r\n* Node JS module definition way\r\n```js\r\nconst BezierCanvas = require('BezierCanvas');\r\n\r\n// You then have access to BezierCanvas object\r\n// (See below the usage section to learn how to use it)\r\n```\r\n\r\n\r\n\r\n## 4. Usage\r\n\r\nOnce you have loaded the library, attaching the component to a canvas is as simple as the following code :\r\n\r\n```javascript\r\nconst canvas = document.getElementById('mycanvas');\r\nconst options = {}; // See Options section to know available options\r\nconst myBezierCanvas = new BezierCanvas(canvas, options);\r\nconst paint = () => { // Refresh the canvas when possible\r\n myBezierCanvas.paint();\r\n requestAnimationFrame(paint);\r\n}\r\nrequestAnimationFrame(paint);\r\n```\r\n\r\n\r\n## 5. Options\r\n\r\nFollowing options are available to custom the component :\r\n\r\n```javascript\r\nconst opts = {\r\n historySize: 50, // How many steps back are tracked\r\n naturalDrawMode: true, // true for a Photoshop pencil tool way, false for default Bezier\r\n maxDistance: 10, // Max distance to a point to consider it hovered\r\n smoothFactor: 0.5, // Smooth factor to change the computed curvature smoothness when adding new construction points\r\n constraintTangents: true, // Should the control points be aligned on the same axis\r\n\r\n constructionPointSize: 6, // Construction points size\r\n constructionPointBorderSize: 1, // Construction points border size\r\n constructionPointBorderColor: 'rgb(150, 150, 150)', // Construction points border color\r\n constructionPointFillColor: 'rgb(230, 230, 230)', // Construction points background fill color\r\n constructionPointActiveFillColor: 'cyan', // Background fill color of construction points while being selected\r\n constructionPointActiveBorderColor: 'rgb(100, 120, 255)', // Border Color of construction pointS while being selected\r\n constructionPointShape: 'disc', // or 'square' : Shape of construction points\r\n\r\n\r\n controlPointSize: 4, // Control points size\r\n controlPointBorderSize: 1, // Control points border size\r\n controlPointBorderColor: 'rgb(120, 120, 120)', // Control points border color\r\n controlPointFillColor: 'rgb(180, 180, 180)', // Control points background fill color\r\n controlPointActiveFillColor: 'cyan', // Background fill color of control points while being selected\r\n controlPointActiveBorderColor: 'rgb(100, 120, 255)', // Border Color of control points while being selected\r\n controlPointShape: 'disc', // or 'square' : Shape of control points\r\n\r\n tangentColor: 'rgb(150, 150, 150)', // Color of tangents\r\n tangentThickness: 2, // Thickness of tangents\r\n\r\n lineCap: LineCap.Round, // 'round' or 'square' or 'butt'\r\n splineColor: 'rgb(0,0,200)', // Color of the Bezier spline\r\n splineThickness: 5, // Thickness of the Bezier spline\r\n showMaxNextAndPreviousTangents: 1 // How many tangents before and after the active point to show at maximum, set -1 to show all\r\n };\r\n````\r\n\r\nHere are some examples of what you can obtain with different options sets :\r\n\r\n\r\n\r\n\r\n\r\nThen to draw a spline : \r\n\r\n- Left click to add a construction point (moving the mouse will change handler points position)\r\n- Right click to remove a construction point\r\n- Maintain CTRL key and move mouse to move a construction/handler point\r\n- Press Ctrl + Z to cancel last action, Ctrl + Y to restore it\r\n\r\n\r\n\r\n### 6. Public API\r\n\r\n#### 6.1 Pre-configuring points\r\nThe library allows to set pre-existing points, for example, to import\r\na previous state, the following instructions describe how to use it.\r\n\r\n```javascript\r\nconst myBezierCanvas = new bezierCanvas(myCanvasElement);\r\n\r\nmyBezierCanvas.setPoints([\r\n {x: 423, y: 130, hp1: {x: 423, y: 426}, hp2: {x: 300, y: 460}},\r\n {x: 390, y: 300, hp1: {x: 602, y: 180}, hp2: {x: 570, y: 127}},\r\n ...\r\n]);\r\n\r\n**OR by setting the \"points\" key of the options object :**\r\n\r\nconst myBezierCanvas = new CanvasBezierHandler(canvas, {\r\n...\r\n points: [\r\n {x: 423, y: 130, hp1: {x: 423, y: 426}, hp2: {x: 300, y: 460}},\r\n {x: 390, y: 300, hp1: {x: 602, y: 180}, hp2: {x: 570, y: 127}},\r\n ...\r\n ]\r\n});\r\n\r\n```\r\n\r\n#### 6.2 Fetching all the existing points\r\n\r\n```javascript\r\nconst myBezierCanvas = new CanvasBezierHandler(canvas);\r\nconst points = myBezierCanvas.getPoints();\r\n/* \r\n* points will contain an array similar to : \r\n* [\r\n* {x: 423, y: 130, hp1: {x: 423, y: 426}, hp2: {x: 300, y: 460}},\r\n* {x: 390, y: 300, hp1: {x: 602, y: 180}, hp2: {x: 570, y: 127}},\r\n* ...\r\n* ]\r\n*/\r\n\r\n```\r\n\r\n#### 6.3 Getting equally distanced points along the current spline\r\nIt can be use for example to draw shapes along the spline form the outside.\r\n\r\n```javascript\r\nconst shapesToDraw = 50; // Count of shapes to draw\r\nconst myBezierCanvas = new CanvasBezierHandler(myCanvas);\r\nconst points = myBezierCanvas.getRegularlyPlacedPoints(shapesToDraw);\r\n\r\n// Then we can do something like\r\npoints.forEach((point) => {\r\n drawSomethingAtPosition(point.x, point.y);\r\n});\r\n```\r\n\r\nThis would for example producing a similar figure :\r\n\r\n\r\n\r\n\r\n#### 6.4 Resetting the component\r\n\r\n```javascript\r\nconst myBezierCanvas = new myBezierCanvas(canvas);\r\nmyBezierCanvas.reset();\r\n// This will erase all the existing points and clear the canvas\r\n```\r\n\r\n\r\n\r\n#### 6.5 Dynamically show/hide spline\r\nFor example, if all you need is to retrieve regular positioned points, you may want to hide the spline.\r\n\r\n```javascript\r\nconst myBezierCanvas = new CanvasBezierHandler(canvas);\r\nmyButtonHide.onclick = () => { myBezierCanvas.hideSplines(); };\r\nmyButtonShow.onclick = () => { myBezierCanvas.showSplines(); };\r\n```\r\n\r\n## 7. License\r\nYou can find all the license information inside the LICENSE.md file\r\n\r\n## 8. Author\r\nBilel OURAL - bilel.oural@b-stud.com\r\n","maintainers":[{"name":"b-stud","email":"bilel.oural@yahoo.fr"}],"time":{"modified":"2022-04-04T17:23:40.609Z","created":"2018-01-03T08:38:41.095Z","1.0.0":"2018-01-03T08:38:41.095Z"},"homepage":"https://github.com/b-stud/bezier-canvas#readme","keywords":["b-stud bstud @bstud @b-stud bezier canvas"],"repository":{"type":"git","url":"git+https://github.com/b-stud/bezier-canvas.git"},"author":{"name":"Bilel OURAL","email":"bilel.oural@b-stud.com","url":"http://www.b-stud.com"},"bugs":{"url":"https://github.com/b-stud/bezier-canvas/issues"},"license":"SEE LICENSE IN LICENSE.md","readmeFilename":"README.md"}