Saturday, April 9, 2016
Making a Simple JS Library to Extend Konva Framework with More Shapes
beginner
,
code
,
custom library
,
extending another library
,
javascript
,
js
,
konva dragging
,
konva framework
,
library based on framework
,
library implementation js
,
triangle drawing
,
tutorial
Detail:
Here, I have only added triangle shape to the kshapejs library. This just a demo to create a custom javascript library based on konva framewrok or, any other js library/frameworks.Learn more about konva framework here.
Get the code here in my github repository,
https://github.com/quickgrid/kshapejs-konva-library/blob/master/kshapejs.jsHow the Triangle is Implemented:
Sample Html File:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Triangle Library Demo</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| background-color: #F0F0F0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| <script src="https://cdn.rawgit.com/konvajs/konva/0.11.1/konva.min.js"></script> | |
| <script type="text/javascript" src="kshapejs.js"></script> | |
| <script> | |
| var width = window.innerWidth; | |
| var height = window.innerHeight; | |
| var stage = new Konva.Stage({ | |
| container: 'container', | |
| width: width, | |
| height: height | |
| }); | |
| var shapesLayer = new Konva.Layer(); | |
| var group = new Konva.Group({ | |
| draggable: true, | |
| x: 50, y: 50 | |
| }); | |
| var poly = []; | |
| for( var i = 0; i < 10; i++ ){ | |
| poly[i] = kshapejs.drawTriangle(i + 300 * Math.random(), i + 300 * Math.random(), i + 200 * Math.random(), 3); | |
| poly[i].move({ | |
| x: 50, y: 0 | |
| }); | |
| group.add(poly[i]); | |
| } | |
| group.on('mouseover', function() { | |
| document.body.style.cursor = 'pointer'; | |
| }); | |
| group.on('mouseout', function() { | |
| document.body.style.cursor = 'default'; | |
| }); | |
| shapesLayer.add(group); | |
| stage.add(shapesLayer); | |
| </script> | |
| </body> | |
| </html> |
KShapeJS Library:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Author: Asif Ahmed | |
| * Site: quickgrid.blogspot.com | |
| * Description: kshapejs is a simple javascript library based on konvajs. | |
| * It allow creating some basic shapes not defined in konva | |
| * library. | |
| */ | |
| (function(window){ | |
| 'use strict'; | |
| function define_library(){ | |
| var kshapejs = {}; | |
| // Takes x,y coordinates of triangle which is left top most point and the triangle size, stroke width | |
| kshapejs.drawTriangle = function(tx, ty, trisize, tstrokewidth){ | |
| var triangle = [ tx, ty, tx, ty + trisize, tx + trisize, ty + trisize / 2 ]; | |
| var poly = new Konva.Line({ | |
| points: triangle, | |
| stroke: 'black', | |
| strokeWidth: tstrokewidth, | |
| closed : true | |
| }); | |
| return poly; | |
| } | |
| return kshapejs; | |
| } | |
| //define globally if it doesn't already exist | |
| if(typeof(kshapejs) === 'undefined'){ | |
| window.kshapejs = define_library(); | |
| } | |
| else{ | |
| console.log("kshapejs already defined."); | |
| } | |
| })(window); |
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment