From ff175aa5777d64d799fe6f15dfc3def082e4c450 Mon Sep 17 00:00:00 2001 From: Anton Lavrenov Date: Sat, 16 Jan 2016 08:48:32 +0800 Subject: [PATCH] end files --- .gitignore | 16 +- LICENSE | 8 +- README.md | 54 +- _config.yml | 174 ++-- gulpfile.js | 144 ++-- jsdoc.json | 66 +- konva.js | 764 ++++++++++-------- scaffolds/page.md | 2 +- scaffolds/post.md | 2 +- scripts/helpers.js | 110 +-- scripts/tags.js | 26 +- source/android-chrome-manifest.json | 82 +- source/browserconfig.xml | 24 +- source/docs/animations/Create_an_Animation.md | 68 +- source/docs/animations/Moving.md | 20 +- source/docs/animations/Rotation.md | 26 +- source/docs/animations/Scaling.md | 30 +- source/docs/animations/Stop_Animation.md | 24 +- .../docs/data_&_serialization/Complex_Load.md | 22 +- .../data_&_serialization/Serialize_a_Stage.md | 22 +- .../docs/data_&_serialization/Simple_Load.md | 20 +- .../data_&_serialization/Stage_Data_URL.md | 34 +- .../drag_and_drop/Complex_Drag_and_Drop.md | 26 +- source/docs/drag_and_drop/Drag_Events.md | 18 +- source/docs/drag_and_drop/Drag_a_Group.md | 16 +- source/docs/drag_and_drop/Drag_a_Line.md | 16 +- source/docs/drag_and_drop/Drag_a_Stage.md | 22 +- source/docs/drag_and_drop/Drag_an_Image.md | 20 +- source/docs/drag_and_drop/Drag_and_Drop.md | 28 +- source/docs/drag_and_drop/Drop_Events.md | 24 +- .../docs/drag_and_drop/Simple_Drag_Bounds.md | 30 +- source/docs/events/Binding_Events.md | 26 +- source/docs/events/Cancel_Propagation.md | 26 +- source/docs/events/Custom_Hit_Region.md | 34 +- source/docs/events/Desktop_and_Mobile.md | 26 +- source/docs/events/Event_Delegation.md | 26 +- source/docs/events/Fire_Events.md | 18 +- source/docs/events/Image_Events.md | 24 +- source/docs/events/Listen_for_Events.md | 28 +- source/docs/events/Mobile_Events.md | 26 +- source/docs/events/Multi_Event.md | 18 +- source/docs/events/Remove_Event.md | 24 +- source/docs/events/Remove_by_Name.md | 26 +- source/docs/filters/Blur.md | 30 +- source/docs/filters/Brighten.md | 34 +- source/docs/filters/Grayscale.md | 24 +- source/docs/filters/Invert.md | 24 +- source/docs/filters/Kaleidoscope.md | 30 +- source/docs/filters/Multiple_Filters.md | 20 +- .../groups_and_layers/Change_Containers.md | 28 +- .../groups_and_layers/Clipping_Regions.md | 20 +- source/docs/groups_and_layers/Groups.md | 24 +- source/docs/groups_and_layers/Layering.md | 24 +- source/docs/how_it_works.md | 76 +- source/docs/index.md | 64 +- .../docs/performance/All_Performance_Tips.md | 38 +- source/docs/performance/Avoid_Memory_Leaks.md | 68 +- source/docs/performance/Batch_Draw.md | 42 +- .../docs/performance/Disable_Perfect_Draw.md | 54 +- source/docs/performance/Layer_Management.md | 34 +- source/docs/performance/Listening_False.md | 24 +- source/docs/performance/Optimize_Animation.md | 20 +- source/docs/performance/Optimize_Strokes.md | 34 +- source/docs/performance/Shape_Caching.md | 38 +- source/docs/performance/Shape_Redraw.md | 28 +- .../docs/sandbox/10000_Shapes_with_Tooltip.md | 10 +- source/docs/sandbox/20000_Nodes.md | 18 +- .../docs/sandbox/Animals_on_the_Beach_Game.md | 10 +- source/docs/sandbox/Animation_Stress_Test.md | 10 +- .../sandbox/Drag_and_Drop_Multiple_Shapes.md | 14 +- .../docs/sandbox/Drag_and_Drop_Stress_Test.md | 10 +- source/docs/sandbox/Elastic_Stars.md | 14 +- source/docs/sandbox/Expand_Images_on_Hover.md | 16 +- source/docs/sandbox/Free_Drawing.md | 16 +- .../docs/sandbox/Image_Border_Highlighting.md | 14 +- source/docs/sandbox/Image_Resize.md | 12 +- .../docs/sandbox/Interactive_Building_Map.md | 14 +- .../Modify_Curves_with_Anchor_Points.md | 16 +- .../sandbox/Modify_Shape_Color_on_Click.md | 14 +- .../docs/sandbox/Multi-touch_Scale_Shape.md | 18 +- .../docs/sandbox/Multi-touch_Scale_Stage.md | 18 +- source/docs/sandbox/Physics_Simulator.md | 14 +- source/docs/sandbox/Planets_Image_Map.md | 14 +- source/docs/sandbox/Quantum_Squiggle.md | 14 +- source/docs/sandbox/Shape_Tango.md | 16 +- source/docs/sandbox/Shape_Tooltips.md | 16 +- source/docs/sandbox/Star_Spiner.md | 14 +- source/docs/sandbox/Wheel_of_Fortune.md | 14 +- source/docs/sandbox/Zoom_Layer_On_hover.md | 14 +- source/docs/sandbox/index.md | 54 +- source/docs/selectors/Select_by_Name.md | 20 +- source/docs/selectors/Select_by_Type.md | 20 +- source/docs/selectors/Select_by_id.md | 24 +- source/docs/shapes/Arc.md | 20 +- source/docs/shapes/Arrow.md | 18 +- source/docs/shapes/Circle.md | 18 +- source/docs/shapes/Custom.md | 28 +- source/docs/shapes/Ellipse.md | 22 +- source/docs/shapes/Image.md | 18 +- source/docs/shapes/Label.md | 18 +- source/docs/shapes/Line_-_Blob.md | 18 +- source/docs/shapes/Line_-_Polygon.md | 18 +- source/docs/shapes/Line_-_Simple_Line.md | 18 +- source/docs/shapes/Line_-_Spline.md | 18 +- source/docs/shapes/Path.md | 22 +- source/docs/shapes/Rect.md | 20 +- source/docs/shapes/RegularPolygon.md | 18 +- source/docs/shapes/Ring.md | 20 +- source/docs/shapes/Sprite.md | 20 +- source/docs/shapes/Star.md | 20 +- source/docs/shapes/Text.md | 20 +- source/docs/shapes/TextPath.md | 20 +- source/docs/shapes/Wedge.md | 20 +- source/docs/styling/Fill.md | 22 +- source/docs/styling/Hide_and_Show.md | 18 +- source/docs/styling/Line_Join.md | 22 +- source/docs/styling/Opacity.md | 22 +- source/docs/styling/Shadow.md | 20 +- source/docs/styling/Stroke.md | 18 +- source/docs/support.md | 16 +- source/docs/tools.md | 14 +- source/docs/tweens/All_Controls.md | 20 +- source/docs/tweens/All_Easings.md | 26 +- source/docs/tweens/Common_Easings.md | 30 +- source/docs/tweens/Complex_Tweening.md | 24 +- source/docs/tweens/Finish_Event.md | 16 +- source/docs/tweens/Linear_Easing.md | 26 +- source/docs/tweens/Tween_Filter.md | 22 +- source/downloads/code/animations/Moving.html | 110 +-- .../downloads/code/animations/Rotation.html | 200 ++--- source/downloads/code/animations/Scaling.html | 192 ++--- .../code/animations/Stop_Animation.html | 148 ++-- .../data_&_serialization/Complex_Load.html | 84 +- .../Serialize_a_Stage.html | 104 +-- .../data_&_serialization/Simple_Load.html | 50 +- .../data_&_serialization/Stage_Data_URL.html | 152 ++-- .../drag_and_drop/Complex_Drag_and_Drop.html | 212 ++--- .../code/drag_and_drop/Drag_Events.html | 140 ++-- .../code/drag_and_drop/Drag_a_Group.html | 118 +-- .../code/drag_and_drop/Drag_a_Line.html | 102 +-- .../code/drag_and_drop/Drag_a_Stage.html | 94 +-- .../code/drag_and_drop/Drag_an_Image.html | 116 +-- .../code/drag_and_drop/Drag_and_Drop.html | 110 +-- .../code/drag_and_drop/Drop_Events.html | 296 +++---- .../drag_and_drop/Simple_Drag_Bounds.html | 150 ++-- .../downloads/code/events/Binding_Events.html | 184 ++--- .../code/events/Cancel_Propagation.html | 116 +-- .../code/events/Custom_Hit_Region.html | 156 ++-- .../code/events/Desktop_and_Mobile.html | 150 ++-- .../code/events/Event_Delegation.html | 106 +-- source/downloads/code/events/Fire_Events.html | 114 +-- .../downloads/code/events/Image_Events.html | 204 ++--- .../code/events/Listen_for_Events.html | 176 ++-- .../downloads/code/events/Mobile_Events.html | 166 ++-- source/downloads/code/events/Multi_Event.html | 132 +-- .../downloads/code/events/Remove_Event.html | 128 +-- .../downloads/code/events/Remove_by_Name.html | 166 ++-- .../downloads/code/events/Stage_Events.html | 104 +-- source/downloads/code/filters/Blur.html | 154 ++-- source/downloads/code/filters/Brighten.html | 152 ++-- source/downloads/code/filters/Grayscale.html | 130 +-- source/downloads/code/filters/Invert.html | 130 +-- .../downloads/code/filters/Kaleidoscope.html | 154 ++-- .../code/filters/Multiple_Filters.html | 154 ++-- .../groups_and_layers/Change_Containers.html | 204 ++--- .../groups_and_layers/Clipping_Regions.html | 138 ++-- .../code/groups_and_layers/Groups.html | 126 +-- .../code/groups_and_layers/Layering.html | 236 +++--- .../downloads/code/performance/BatchDraw.html | 108 +-- .../performance/Disable_Perfect_Draw.html | 154 ++-- .../code/performance/Layer_Management.html | 214 ++--- .../code/performance/Listening_False.html | 116 +-- .../code/performance/Optimize_Animation.html | 128 +-- .../code/performance/Optimize_Strokes.html | 178 ++-- .../code/performance/Shape_Caching.html | 128 +-- .../code/performance/Shape_Redraw.html | 132 +-- .../sandbox/10000_Shapes_With_Tooltip.html | 168 ++-- .../downloads/code/sandbox/20000_Nodes.html | 288 +++---- .../sandbox/Animals_on_the_Beach_Game.html | 440 +++++----- .../code/sandbox/Animation_Stress_Test.html | 174 ++-- .../Drag_And_Drop_Multiple_Shapes.html | 150 ++-- .../sandbox/Drag_And_Drop_Stress_Test.html | 164 ++-- .../downloads/code/sandbox/Elastic_Stars.html | 236 +++--- .../code/sandbox/Expand_Image_On_Hover.html | 186 ++--- .../downloads/code/sandbox/Free_Drawing.html | 246 +++--- .../sandbox/Image_Border_Highlighting.html | 174 ++-- .../downloads/code/sandbox/Image_Resize.html | 336 ++++---- .../sandbox/Interactive_Building_Map.html | 284 +++---- .../Modify_Curves_with_Anchor_Points.html | 314 +++---- .../sandbox/Modify_Shape_Color_on_Click.html | 134 +-- .../code/sandbox/Multi-touch_Scale_Shape.html | 246 +++--- .../code/sandbox/Multi-touch_Scale_Stage.html | 196 ++--- .../code/sandbox/Physics_Simulator.html | 678 ++++++++-------- .../code/sandbox/Planets_Image_Map.html | 272 +++---- .../code/sandbox/Quantum_Squiggle.html | 140 ++-- .../downloads/code/sandbox/Shape_Tango.html | 172 ++-- .../code/sandbox/Shape_Tooltips.html | 216 ++--- .../downloads/code/sandbox/Star_Spinner.html | 230 +++--- .../code/sandbox/Wheel_of_Fortune.html | 526 ++++++------ .../code/sandbox/Zoom_Layer_On_Hover.html | 148 ++-- .../code/selectors/Select_by_Name.html | 230 +++--- .../code/selectors/Select_by_Type.html | 226 +++--- .../code/selectors/Select_by_id.html | 186 ++--- source/downloads/code/shapes/Arc.html | 98 +-- source/downloads/code/shapes/Arrow.html | 96 +-- source/downloads/code/shapes/Circle.html | 92 +-- source/downloads/code/shapes/Custom.html | 108 +-- source/downloads/code/shapes/Ellipse.html | 100 +-- source/downloads/code/shapes/Image.html | 98 +-- source/downloads/code/shapes/Label.html | 206 ++--- source/downloads/code/shapes/Line_-_Blob.html | 92 +-- .../downloads/code/shapes/Line_-_Polygon.html | 90 +-- .../code/shapes/Line_-_Simple_line.html | 184 ++--- .../downloads/code/shapes/Line_-_Spline.html | 192 ++--- source/downloads/code/shapes/Path.html | 90 +-- .../downloads/code/shapes/RegularPolygon.html | 86 +- source/downloads/code/shapes/Ring.html | 96 +-- source/downloads/code/shapes/Sprite.html | 178 ++-- source/downloads/code/shapes/Star.html | 90 +-- source/downloads/code/shapes/Text.html | 160 ++-- source/downloads/code/shapes/TextPath.html | 94 +-- source/downloads/code/shapes/Wedge.html | 96 +-- source/downloads/code/shapes/rect.html | 94 +-- source/downloads/code/styling/Fill.html | 348 ++++---- .../downloads/code/styling/Hide_and_Show.html | 150 ++-- source/downloads/code/styling/Line_Join.html | 114 +-- source/downloads/code/styling/Opacity.html | 114 +-- source/downloads/code/styling/Shadow.html | 154 ++-- source/downloads/code/styling/Stroke.html | 114 +-- .../downloads/code/tweens/All_Controls.html | 222 ++--- source/downloads/code/tweens/All_Easings.html | 230 +++--- .../downloads/code/tweens/Common_Easing.html | 224 ++--- .../code/tweens/Complex_Tweening.html | 266 +++--- .../downloads/code/tweens/Finish_Event.html | 152 ++-- .../downloads/code/tweens/Tween_Filter.html | 130 +-- source/index.jade | 86 +- source/robots.txt | 4 +- themes/hexo3/_config.yml | 284 +++---- themes/hexo3/layout/_partial/after-footer.ejs | 72 +- themes/hexo3/layout/_partial/article.ejs | 32 +- themes/hexo3/layout/_partial/comment.ejs | 12 +- themes/hexo3/layout/_partial/footer.ejs | 36 +- .../layout/_partial/google-analytics.ejs | 20 +- themes/hexo3/layout/_partial/head.ejs | 70 +- themes/hexo3/layout/_partial/header.ejs | 40 +- themes/hexo3/layout/_partial/news-banner.ejs | 14 +- themes/hexo3/layout/_partial/post/date.ejs | 8 +- themes/hexo3/layout/_partial/post/share.ejs | 10 +- themes/hexo3/layout/_partial/post/title.ejs | 28 +- themes/hexo3/layout/_partial/share.ejs | 12 +- themes/hexo3/layout/_partial/sidebar.ejs | 14 +- .../hexo3/layout/api/_partial/classitem.ejs | 116 +-- .../hexo3/layout/api/_partial/deprecated.ejs | 8 +- themes/hexo3/layout/api/_partial/options.ejs | 22 +- themes/hexo3/layout/api/_partial/sidebar.ejs | 18 +- themes/hexo3/layout/api/class.ejs | 92 +-- themes/hexo3/layout/api/layout.ejs | 30 +- themes/hexo3/layout/api/module.ejs | 62 +- themes/hexo3/layout/archive.ejs | 18 +- themes/hexo3/layout/index.ejs | 32 +- themes/hexo3/layout/layout.ejs | 16 +- themes/hexo3/layout/page.ejs | 54 +- themes/hexo3/layout/post.ejs | 10 +- themes/hexo3/source/css/_partial/api.styl | 176 ++-- themes/hexo3/source/css/_partial/footer.styl | 108 +-- themes/hexo3/source/css/_partial/header.styl | 248 +++--- .../hexo3/source/css/_partial/highlight.styl | 208 ++--- themes/hexo3/source/css/_partial/index.styl | 334 ++++---- themes/hexo3/source/css/_partial/news.styl | 88 +- themes/hexo3/source/css/_partial/page.styl | 400 ++++----- themes/hexo3/source/css/_partial/sidebar.styl | 74 +- themes/hexo3/source/css/_util/grid.styl | 76 +- themes/hexo3/source/css/_util/mixin.styl | 100 +-- themes/hexo3/source/css/_variables.styl | 80 +- themes/hexo3/source/css/fonts/icomoon.svg | 50 +- themes/hexo3/source/css/style.styl | 56 +- themes/hexo3/source/js/retina.min.js | 18 +- themes/hexo3/source/js/script.js | 112 +-- 278 files changed, 12989 insertions(+), 12879 deletions(-) diff --git a/.gitignore b/.gitignore index 048c28f38..2a8af3e81 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,9 @@ -.DS_Store -.idea -npm-debug.log -node_modules -public -.deploy -db.json -debug.log +.DS_Store +.idea +npm-debug.log +node_modules +public +.deploy +db.json +debug.log tmp \ No newline at end of file diff --git a/LICENSE b/LICENSE index e662c7862..14da79274 100644 --- a/LICENSE +++ b/LICENSE @@ -1,5 +1,5 @@ -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md index 541b184f2..496cbbb25 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,28 @@ -# Konva Website - -The website for Konva. Created with Hexo framework. -You can see the generated files at [konvajs/konvajs.github.io](https://github.com/konvajs/konvajs.github.io) repository. - - -## Getting started - -Install dependencies: - -``` bash -$ git clone https://github.com/konvajs/site.git -$ cd site -$ npm install -$ npm install gulp -g -``` - -Generate: - -``` bash -$ gulp generate -``` - -Run server: - -``` bash -$ gulp server +# Konva Website + +The website for Konva. Created with Hexo framework. +You can see the generated files at [konvajs/konvajs.github.io](https://github.com/konvajs/konvajs.github.io) repository. + + +## Getting started + +Install dependencies: + +``` bash +$ git clone https://github.com/konvajs/site.git +$ cd site +$ npm install +$ npm install gulp -g +``` + +Generate: + +``` bash +$ gulp generate +``` + +Run server: + +``` bash +$ gulp server ``` \ No newline at end of file diff --git a/_config.yml b/_config.yml index b773a3c3f..1ac3340c8 100644 --- a/_config.yml +++ b/_config.yml @@ -1,87 +1,87 @@ -# Konva Configuration - -# Site -title: Konva.js - JavaScript 2d canvas framework -subtitle: Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. -description: Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. -author: Anton Lavrenov -language: en - -# URL -## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' -url: http://konvajs.github.io -root: / -permalink: news/:year/:month/:day/:title/ -tag_dir: tags -archive_dir: news -category_dir: categories -code_dir: downloads/code - -# Directory -source_dir: source -public_dir: public - -# Writing -new_post_name: :year-:month-:day-:title.md # File name of new posts -default_layout: post -auto_spacing: false # Add spaces between asian characters and western characters -titlecase: false # Transform title into titlecase -external_link: true # Open external links in new tab -max_open_file: 100 -multi_thread: true -filename_case: 0 -render_drafts: false -post_asset_folder: true -relative_link: false -highlight: - enable: true - line_number: false - -# Category & Tag -default_category: uncategorized -category_map: -tag_map: - -# Archives -# 2: Paginate result -# 1: Display result in same page -archive: 2 -category: 2 -tag: 2 - -# Server -## Hexo uses Connect as a server -## You can customize the logger format as defined in -## http://www.senchalabs.org/connect/logger.html -port: 4000 -server_ip: 0.0.0.0 -logger: false -logger_format: - -# Date / Time format -## Hexo uses Moment.js to parse and display date -## You can customize the date format as defined in -## http://momentjs.com/docs/#/displaying/format/ -date_format: MMM D YYYY -time_format: H:mm:ss - -# Pagination -## Set per_page to 0 to disable pagination -per_page: 0 -pagination_dir: page - -# Disqus -disqus_shortname: konvajs - -# Extensions -## Plugins: https://github.com/tommy351/hexo/wiki/Plugins -## Themes: https://github.com/tommy351/hexo/wiki/Themes -theme: hexo3 -exclude_generator: -- home - -# Deployment -## Docs: http://hexo.io/docs/deployment.html -deploy: - type: github - repo: https://github.com/konvajs/konvajs.github.io.git +# Konva Configuration + +# Site +title: Konva.js - JavaScript 2d canvas framework +subtitle: Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. +description: Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. +author: Anton Lavrenov +language: en + +# URL +## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' +url: http://konvajs.github.io +root: / +permalink: news/:year/:month/:day/:title/ +tag_dir: tags +archive_dir: news +category_dir: categories +code_dir: downloads/code + +# Directory +source_dir: source +public_dir: public + +# Writing +new_post_name: :year-:month-:day-:title.md # File name of new posts +default_layout: post +auto_spacing: false # Add spaces between asian characters and western characters +titlecase: false # Transform title into titlecase +external_link: true # Open external links in new tab +max_open_file: 100 +multi_thread: true +filename_case: 0 +render_drafts: false +post_asset_folder: true +relative_link: false +highlight: + enable: true + line_number: false + +# Category & Tag +default_category: uncategorized +category_map: +tag_map: + +# Archives +# 2: Paginate result +# 1: Display result in same page +archive: 2 +category: 2 +tag: 2 + +# Server +## Hexo uses Connect as a server +## You can customize the logger format as defined in +## http://www.senchalabs.org/connect/logger.html +port: 4000 +server_ip: 0.0.0.0 +logger: false +logger_format: + +# Date / Time format +## Hexo uses Moment.js to parse and display date +## You can customize the date format as defined in +## http://momentjs.com/docs/#/displaying/format/ +date_format: MMM D YYYY +time_format: H:mm:ss + +# Pagination +## Set per_page to 0 to disable pagination +per_page: 0 +pagination_dir: page + +# Disqus +disqus_shortname: konvajs + +# Extensions +## Plugins: https://github.com/tommy351/hexo/wiki/Plugins +## Themes: https://github.com/tommy351/hexo/wiki/Themes +theme: hexo3 +exclude_generator: +- home + +# Deployment +## Docs: http://hexo.io/docs/deployment.html +deploy: + type: github + repo: https://github.com/konvajs/konvajs.github.io.git diff --git a/gulpfile.js b/gulpfile.js index ebff833c8..35c8e2b16 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,73 +1,73 @@ -var gulp = require('gulp'), - clean = require('gulp-clean'), - shell = require('gulp-shell'), - jsdoc = require("gulp-jsdoc"), - webserver = require('gulp-webserver'); - -// steps -// 1. clean /public folder -// 2. generate new /public with hexo -// 3. replace /public/downloads with /source/downloads -// 4. generate api docs to /public - -// 1 -gulp.task('clean-public', function(){ - return gulp.src('public', {read: false}) - .pipe(clean()); -}); - -// 2 -gulp.task('generate-hexo', ['clean-public'], shell.task(['node ./node_modules/hexo/bin/hexo generate'], {cwd: './'})); - - -// 3 -gulp.task('clean-public-downloads', ['generate-hexo'], function(){ - return gulp.src('public/downloads', {read: false}) - .pipe(clean()); -}); - -gulp.task('copy-source-download', ['clean-public-downloads'] ,function() { - return gulp.src('source/downloads/**') - .pipe(gulp.dest('public/downloads')); -}); - -// 4 -gulp.task('docs', ['generate-hexo'], function() { - return gulp.src("konva.js") - .pipe(jsdoc('./public/api', { - "path": "ink-docstrap", - "cleverLinks" : false, - "monospaceLinks" : false, - "dateFormat" : "ddd MMM Do YYYY", - "outputSourceFiles" : true, - "outputSourcePath" : true, - "systemName" : "Konva", - "footer" : "", - "copyright" : "Konva Copyright © 2015 The contributors to the Konva project.", - "navType" : "vertical", - "theme" : "cosmo", - "linenums" : true, - "collapseSymbols" : false, - "inverseNav" : true, - "highlightTutorialCode" : true, - "analytics" : { - "ua" : "UA-54202824-2", - "domain" : "http://konvajs.github.io" - } - })) -}); - -gulp.task('server', function() { - gulp.src('public') - .pipe(webserver({})); -}); - -gulp.task('generate', [ - 'clean-public', - 'generate-hexo', - 'clean-public-downloads', - 'copy-source-download', - 'docs' - ]); - +var gulp = require('gulp'), + clean = require('gulp-clean'), + shell = require('gulp-shell'), + jsdoc = require("gulp-jsdoc"), + webserver = require('gulp-webserver'); + +// steps +// 1. clean /public folder +// 2. generate new /public with hexo +// 3. replace /public/downloads with /source/downloads +// 4. generate api docs to /public + +// 1 +gulp.task('clean-public', function(){ + return gulp.src('public', {read: false}) + .pipe(clean()); +}); + +// 2 +gulp.task('generate-hexo', ['clean-public'], shell.task(['node ./node_modules/hexo/bin/hexo generate'], {cwd: './'})); + + +// 3 +gulp.task('clean-public-downloads', ['generate-hexo'], function(){ + return gulp.src('public/downloads', {read: false}) + .pipe(clean()); +}); + +gulp.task('copy-source-download', ['clean-public-downloads'] ,function() { + return gulp.src('source/downloads/**') + .pipe(gulp.dest('public/downloads')); +}); + +// 4 +gulp.task('docs', ['generate-hexo'], function() { + return gulp.src("konva.js") + .pipe(jsdoc('./public/api', { + "path": "ink-docstrap", + "cleverLinks" : false, + "monospaceLinks" : false, + "dateFormat" : "ddd MMM Do YYYY", + "outputSourceFiles" : true, + "outputSourcePath" : true, + "systemName" : "Konva", + "footer" : "", + "copyright" : "Konva Copyright © 2015 The contributors to the Konva project.", + "navType" : "vertical", + "theme" : "cosmo", + "linenums" : true, + "collapseSymbols" : false, + "inverseNav" : true, + "highlightTutorialCode" : true, + "analytics" : { + "ua" : "UA-54202824-2", + "domain" : "http://konvajs.github.io" + } + })) +}); + +gulp.task('server', function() { + gulp.src('public') + .pipe(webserver({})); +}); + +gulp.task('generate', [ + 'clean-public', + 'generate-hexo', + 'clean-public-downloads', + 'copy-source-download', + 'docs' + ]); + gulp.task('default', ['generate', 'server']); \ No newline at end of file diff --git a/jsdoc.json b/jsdoc.json index 1caf8fa41..2f7fca52f 100644 --- a/jsdoc.json +++ b/jsdoc.json @@ -1,33 +1,33 @@ -{ - "name" : "Konva", - "tags" : { - "allowUnknownTags" : true - }, - "plugins" : ["plugins/markdown"], - - "templates" : { - "path": "ink-docstrap", - "cleverLinks" : false, - "monospaceLinks" : false, - "dateFormat" : "ddd MMM Do YYYY", - "outputSourceFiles" : true, - "outputSourcePath" : true, - "systemName" : "Konva", - "footer" : "", - "copyright" : "Konva Copyright © 2015 The contributors to the Konva project.", - "navType" : "vertical", - "theme" : "cosmo", - "linenums" : true, - "collapseSymbols" : false, - "inverseNav" : true, - "highlightTutorialCode" : true, - "analytics" : { - "ua" : "UA-54202824-2", - "domain" : "http://konvajs.github.io" - }, - }, - "markdown" : { - "parser" : "gfm", - "hardwrap" : true - } -} +{ + "name" : "Konva", + "tags" : { + "allowUnknownTags" : true + }, + "plugins" : ["plugins/markdown"], + + "templates" : { + "path": "ink-docstrap", + "cleverLinks" : false, + "monospaceLinks" : false, + "dateFormat" : "ddd MMM Do YYYY", + "outputSourceFiles" : true, + "outputSourcePath" : true, + "systemName" : "Konva", + "footer" : "", + "copyright" : "Konva Copyright © 2015 The contributors to the Konva project.", + "navType" : "vertical", + "theme" : "cosmo", + "linenums" : true, + "collapseSymbols" : false, + "inverseNav" : true, + "highlightTutorialCode" : true, + "analytics" : { + "ua" : "UA-54202824-2", + "domain" : "http://konvajs.github.io" + }, + }, + "markdown" : { + "parser" : "gfm", + "hardwrap" : true + } +} diff --git a/konva.js b/konva.js index 8ffe35d8e..f6e9fcde1 100644 --- a/konva.js +++ b/konva.js @@ -1,9 +1,9 @@ /* - * Konva JavaScript Framework v0.10.0 + * Konva JavaScript Framework v0.11.0 * http://konvajs.github.io/ * Licensed under the MIT or GPL Version 2 licenses. - * Date: Tue Oct 27 2015 + * Date: Sat Jan 16 2016 * * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva) @@ -27,17 +27,19 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ -/** - * @namespace Konva - */ -var Konva = {}; -(function(root) { + +// runtime check for already included Konva +(function(){ 'use strict'; + /** + * @namespace Konva + */ + var PI_OVER_180 = Math.PI / 180; - Konva = { + var Konva = { // public - version: '0.10.0', + version: '0.11.0', // private stages: [], @@ -198,31 +200,25 @@ var Konva = {}; UA: undefined }; - Konva.UA = Konva._parseUA((root.navigator && root.navigator.userAgent) || ''); - -})(this); + var global = + typeof window !== 'undefined' ? window : + typeof global !== 'undefined' ? global : + typeof WorkerGlobalScope !== 'undefined' ? self : {}; -// Uses Node, AMD or browser globals to create a module. -// If you want something that will work in other stricter CommonJS environments, -// or if you need to create a circular dependency, see commonJsStrict.js + Konva.UA = Konva._parseUA((global.navigator && global.navigator.userAgent) || ''); -// Defines a module "returnExports" that depends another module called "b". -// Note that the name of the module is implied by the file name. It is best -// if the file name and the exported global have matching names. - -// If the 'b' module also uses this type of boilerplate, then -// in the browser, it will create a global .b that is used below. + if (global.Konva) { + console.error( + 'Konva instance is already exist in current eviroment. ' + + 'Please use only one instance.' + ); + } + global.Konva = Konva; + Konva.global = global; -// If you do not want to support the browser global path, then you -// can remove the `root` use and the passing `this` as the first arg to -// the top function. -// if the module has no dependencies, the above pattern can be simplified to -( function(root, factory) { - 'use strict'; if( typeof exports === 'object') { - var KonvaJS = factory(); // runtime-check for browserify and nw.js (node-webkit) if(global.window && global.window.document) { Konva.document = global.window.document; @@ -239,25 +235,18 @@ var Konva = {}; Konva.window.Image = Canvas.Image; Konva._nodeCanvas = Canvas; } - - Konva.root = root; - module.exports = KonvaJS; + module.exports = Konva; return; } else if( typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. - define(factory); + define(function() { + return Konva; + }); } Konva.document = document; Konva.window = window; - Konva.root = root; -}(this, function() { - 'use strict'; - // Just return a value to define the module export. - // This example returns an object, but the module - // can return a function as the exported value. - return Konva; -})); +})(); /*eslint-disable eqeqeq, no-cond-assign, no-empty*/ (function() { @@ -800,6 +789,13 @@ var Konva = {}; } return names.length > 0; }, + isValidSelector: function(selector) { + if (typeof selector !== 'string') { + return false; + } + var firstChar = selector[0]; + return firstChar === '#' || firstChar === '.' || firstChar === firstChar.toUpperCase(); + }, createCanvasElement: function() { var canvas = Konva.document.createElement('canvas'); // on some environments canvas.style is readonly @@ -1099,7 +1095,7 @@ var Konva = {}; * IE9 on Windows7 64bit will throw a JS error * if we don't use window.console in the conditional */ - if(Konva.root.console && console.warn && Konva.showWarnings) { + if(Konva.global.console && console.warn && Konva.showWarnings) { console.warn(KONVA_WARNING + str); } }, @@ -2658,8 +2654,18 @@ var Konva = {}; * var oldVal = evt.oldVal; * var newVal = evt.newVal; * }); + * + * // get event targets + * // with event delegations + * layer.on('click', 'Group', function(evt) { + * var shape = evt.target; + * var group = evtn.currentTarger; + * }); */ on: function(evtStr, handler) { + if (arguments.length === 3) { + return this._delegate.apply(this, arguments); + } var events = evtStr.split(SPACE), len = events.length, n, event, parts, baseEvent, name; @@ -2747,15 +2753,30 @@ var Konva = {}; evt: evt }; this.fire(evt.type, e); + return this; }, addEventListener: function(type, handler) { // we have to pass native event to handler this.on(type, function(evt){ handler.call(this, evt.evt); }); + return this; }, removeEventListener: function(type) { this.off(type); + return this; + }, + // like node.on + _delegate: function(event, selector, handler) { + var stopNode = this; + this.on(event, function(evt) { + var targets = evt.target.findAncestors(selector, true, stopNode); + for(var i = 0; i < targets.length; i++) { + evt = Konva.Util.cloneObject(evt); + evt.currentTarget = targets[i]; + handler.call(targets[i], evt); + } + }); }, /** * remove self from parent, but don't destroy @@ -2797,6 +2818,7 @@ var Konva = {}; Konva._removeName(this.getName(), this._id); this.remove(); + return this; }, /** * get attr @@ -3070,12 +3092,14 @@ var Konva = {}; }, /** * get absolute position relative to the top left corner of the stage container div + * or relative to passed node * @method + * @param {Object} [top] optional parent node * @memberof Konva.Node.prototype * @returns {Object} */ - getAbsolutePosition: function() { - var absoluteMatrix = this.getAbsoluteTransform().getMatrix(), + getAbsolutePosition: function(top) { + var absoluteMatrix = this.getAbsoluteTransform(top).getMatrix(), absoluteTransform = new Konva.Transform(), offset = this.offset(); @@ -3408,6 +3432,84 @@ var Konva = {}; getParent: function() { return this.parent; }, + /** + * get all ancestros (parent then parent of the parent, etc) of the node + * @method + * @memberof Konva.Node.prototype + * @param {String} [selector] selector for search + * @param {Boolean} [includeSelf] show we think that node is ancestro itself? + * @param {Konva.Node} [stopNode] optional node where we need to stop searching (one of ancestors) + * @returns {Array} [ancestors] + * @example + * // get one of the parent group + * var parentGroups = node.findAncestors('Group'); + */ + findAncestors: function(selector, includeSelf, stopNode) { + var res = []; + + if (includeSelf && this._isMatch(selector)) { + res.push(this); + } + var ancestor = this.parent; + while(ancestor) { + if (ancestor === stopNode) { + return res; + } + if (ancestor._isMatch(selector)) { + res.push(ancestor); + } + ancestor = ancestor.parent; + } + return res; + }, + /** + * get ancestor (parent or parent of the parent, etc) of the node that match passed selector + * @method + * @memberof Konva.Node.prototype + * @param {String} [selector] selector for search + * @param {Boolean} [includeSelf] show we think that node is ancestro itself? + * @param {Konva.Node} [stopNode] optional node where we need to stop searching (one of ancestors) + * @returns {Konva.Node} ancestor + * @example + * // get one of the parent group + * var group = node.findAncestors('.mygroup'); + */ + findAncestor: function(selector, includeSelf, stopNode) { + return this.findAncestors(selector, includeSelf, stopNode)[0]; + }, + // is current node match passed selector? + _isMatch: function(selector) { + if (!selector) { + return false; + } + var selectorArr = selector.replace(/ /g, '').split(','), + len = selectorArr.length, + n, sel; + + for (n = 0; n < len; n++) { + sel = selectorArr[n]; + if (!Konva.Util.isValidSelector(sel)) { + Konva.Util.warn('Selector "' + sel + '" is invalid. Allowed selectors examples are "#foo", ".bar" or "Group".'); + Konva.Util.warn('If you have a custom shape with such className, please change it to start with upper letter like "Triangle".'); + Konva.Util.warn('Konva is awesome, right?'); + } + // id selector + if(sel.charAt(0) === '#') { + if (this.id() === sel.slice(1)) { + return true; + } + } + // name selector + else if(sel.charAt(0) === '.') { + if (this.hasName(sel.slice(1))) { + return true; + } + } else if (this._get(sel).length !== 0) { + return true; + } + } + return false; + }, /** * get layer ancestor * @method @@ -3461,13 +3563,15 @@ var Konva = {}; * node.fire('click', null, true); */ fire: function(eventType, evt, bubble) { + evt = evt || {}; + evt.target = evt.target || this; // bubble if (bubble) { - this._fireAndBubble(eventType, evt || {}); + this._fireAndBubble(eventType, evt); } // no bubble else { - this._fire(eventType, evt || {}); + this._fire(eventType, evt); } return this; }, @@ -3836,6 +3940,7 @@ var Konva = {}; names.splice(index, 1); this.setName(names.join(' ')); } + return this; }, /** * set attr @@ -3864,6 +3969,9 @@ var Konva = {}; var oldVal; if(val !== undefined) { oldVal = this.attrs[key]; + if (oldVal === val) { + return; + } this.attrs[key] = val; this._fireChangeEvent(key, oldVal, val); } @@ -3900,7 +4008,7 @@ var Konva = {}; // simulate event bubbling var stopBubble = (eventType === MOUSEENTER || eventType === MOUSELEAVE) && ((compareShape && compareShape.isAncestorOf && compareShape.isAncestorOf(this)) || !!(compareShape && compareShape.isAncestorOf)); - if(evt && !evt.cancelBubble && this.parent && this.parent.isListening() && (!stopBubble)) { + if((evt && !evt.cancelBubble || !evt) && this.parent && this.parent.isListening() && (!stopBubble)) { if(compareShape && compareShape.parent) { this._fireAndBubble.call(this.parent, eventType, evt, compareShape.parent); } @@ -3914,6 +4022,8 @@ var Konva = {}; var events = this.eventListeners[eventType], i; + evt = Konva.Util.cloneObject(evt || {}); + evt.currentTarget = this; evt.type = eventType; if (events) { @@ -4455,33 +4565,33 @@ var Konva = {}; Konva.Collection.mapMethods(Konva.Node); })(Konva); -(function() { - 'use strict'; - /** - * Grayscale Filter - * @function - * @memberof Konva.Filters - * @param {Object} imageData - * @example - * node.cache(); - * node.filters([Konva.Filters.Grayscale]); - */ - Konva.Filters.Grayscale = function(imageData) { - var data = imageData.data, - len = data.length, - i, brightness; - - for(i = 0; i < len; i += 4) { - brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]; - // red - data[i] = brightness; - // green - data[i + 1] = brightness; - // blue - data[i + 2] = brightness; - } - }; -})(); +(function() { + 'use strict'; + /** + * Grayscale Filter + * @function + * @memberof Konva.Filters + * @param {Object} imageData + * @example + * node.cache(); + * node.filters([Konva.Filters.Grayscale]); + */ + Konva.Filters.Grayscale = function(imageData) { + var data = imageData.data, + len = data.length, + i, brightness; + + for(i = 0; i < len; i += 4) { + brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]; + // red + data[i] = brightness; + // green + data[i + 1] = brightness; + // blue + data[i + 2] = brightness; + } + }; +})(); (function() { 'use strict'; @@ -4524,32 +4634,32 @@ var Konva = {}; })(); -(function() { - 'use strict'; - /** - * Invert Filter - * @function - * @memberof Konva.Filters - * @param {Object} imageData - * @example - * node.cache(); - * node.filters([Konva.Filters.Invert]); - */ - Konva.Filters.Invert = function(imageData) { - var data = imageData.data, - len = data.length, - i; - - for(i = 0; i < len; i += 4) { - // red - data[i] = 255 - data[i]; - // green - data[i + 1] = 255 - data[i + 1]; - // blue - data[i + 2] = 255 - data[i + 2]; - } - }; -})(); +(function() { + 'use strict'; + /** + * Invert Filter + * @function + * @memberof Konva.Filters + * @param {Object} imageData + * @example + * node.cache(); + * node.filters([Konva.Filters.Invert]); + */ + Konva.Filters.Invert = function(imageData) { + var data = imageData.data, + len = data.length, + i; + + for(i = 0; i < len; i += 4) { + // red + data[i] = 255 - data[i]; + // green + data[i + 1] = 255 - data[i + 1]; + // blue + data[i + 2] = 255 - data[i + 2]; + } + }; +})(); /* the Gauss filter @@ -5834,181 +5944,181 @@ var Konva = {}; */ })(); -(function () { - 'use strict'; - - /** - * Noise Filter. Randomly adds or substracts to the color channels - * @function - * @name Noise - * @memberof Konva.Filters - * @param {Object} imageData - * @author ippo615 - * @example - * node.cache(); - * node.filters([Konva.Filters.Noise]); - * node.noise(0.8); - */ - Konva.Filters.Noise = function (imageData) { - var amount = this.noise() * 255, - data = imageData.data, - nPixels = data.length, - half = amount / 2, - i; - - for (i = 0; i < nPixels; i += 4) { - data[i + 0] += half - 2 * half * Math.random(); - data[i + 1] += half - 2 * half * Math.random(); - data[i + 2] += half - 2 * half * Math.random(); - } - }; - - Konva.Factory.addGetterSetter(Konva.Node, 'noise', 0.2, null, Konva.Factory.afterSetFilter); - - /** - * get/set noise amount. Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter. - * @name noise - * @method - * @memberof Konva.Node.prototype - * @param {Number} noise - * @returns {Number} - */ -})(); - -/*eslint-disable max-depth */ -(function () { - 'use strict'; - /** - * Pixelate Filter. Averages groups of pixels and redraws - * them as larger pixels - * @function - * @name Pixelate - * @memberof Konva.Filters - * @param {Object} imageData - * @author ippo615 - * @example - * node.cache(); - * node.filters([Konva.Filters.Pixelate]); - * node.pixelSize(10); - */ - - Konva.Filters.Pixelate = function (imageData) { - - var pixelSize = Math.ceil(this.pixelSize()), - width = imageData.width, - height = imageData.height, - x, y, i, - //pixelsPerBin = pixelSize * pixelSize, - red, green, blue, alpha, - nBinsX = Math.ceil(width / pixelSize), - nBinsY = Math.ceil(height / pixelSize), - xBinStart, xBinEnd, yBinStart, yBinEnd, - xBin, yBin, pixelsInBin; - imageData = imageData.data; - - for (xBin = 0; xBin < nBinsX; xBin += 1) { - for (yBin = 0; yBin < nBinsY; yBin += 1) { - - // Initialize the color accumlators to 0 - red = 0; - green = 0; - blue = 0; - alpha = 0; - - // Determine which pixels are included in this bin - xBinStart = xBin * pixelSize; - xBinEnd = xBinStart + pixelSize; - yBinStart = yBin * pixelSize; - yBinEnd = yBinStart + pixelSize; - - // Add all of the pixels to this bin! - pixelsInBin = 0; - for (x = xBinStart; x < xBinEnd; x += 1) { - if( x >= width ){ continue; } - for (y = yBinStart; y < yBinEnd; y += 1) { - if( y >= height ){ continue; } - i = (width * y + x) * 4; - red += imageData[i + 0]; - green += imageData[i + 1]; - blue += imageData[i + 2]; - alpha += imageData[i + 3]; - pixelsInBin += 1; - } - } - - // Make sure the channels are between 0-255 - red = red / pixelsInBin; - green = green / pixelsInBin; - blue = blue / pixelsInBin; - - // Draw this bin - for (x = xBinStart; x < xBinEnd; x += 1) { - if( x >= width ){ continue; } - for (y = yBinStart; y < yBinEnd; y += 1) { - if( y >= height ){ continue; } - i = (width * y + x) * 4; - imageData[i + 0] = red; - imageData[i + 1] = green; - imageData[i + 2] = blue; - imageData[i + 3] = alpha; - } - } - } - } - - }; - - Konva.Factory.addGetterSetter(Konva.Node, 'pixelSize', 8, null, Konva.Factory.afterSetFilter); - - /** - * get/set pixel size. Use with {@link Konva.Filters.Pixelate} filter. - * @name pixelSize - * @method - * @memberof Konva.Node.prototype - * @param {Integer} pixelSize - * @returns {Integer} - */ -})(); - -(function () { - 'use strict'; - /** - * Threshold Filter. Pushes any value above the mid point to - * the max and any value below the mid point to the min. - * This affects the alpha channel. - * @function - * @name Threshold - * @memberof Konva.Filters - * @param {Object} imageData - * @author ippo615 - * @example - * node.cache(); - * node.filters([Konva.Filters.Threshold]); - * node.threshold(0.1); - */ - - Konva.Filters.Threshold = function (imageData) { - var level = this.threshold() * 255, - data = imageData.data, - len = data.length, - i; - - for (i = 0; i < len; i += 1) { - data[i] = data[i] < level ? 0 : 255; - } - }; - - Konva.Factory.addGetterSetter(Konva.Node, 'threshold', 0.5, null, Konva.Factory.afterSetFilter); - - /** - * get/set threshold. Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter. - * @name threshold - * @method - * @memberof Konva.Node.prototype - * @param {Number} threshold - * @returns {Number} - */ -})(); +(function () { + 'use strict'; + + /** + * Noise Filter. Randomly adds or substracts to the color channels + * @function + * @name Noise + * @memberof Konva.Filters + * @param {Object} imageData + * @author ippo615 + * @example + * node.cache(); + * node.filters([Konva.Filters.Noise]); + * node.noise(0.8); + */ + Konva.Filters.Noise = function (imageData) { + var amount = this.noise() * 255, + data = imageData.data, + nPixels = data.length, + half = amount / 2, + i; + + for (i = 0; i < nPixels; i += 4) { + data[i + 0] += half - 2 * half * Math.random(); + data[i + 1] += half - 2 * half * Math.random(); + data[i + 2] += half - 2 * half * Math.random(); + } + }; + + Konva.Factory.addGetterSetter(Konva.Node, 'noise', 0.2, null, Konva.Factory.afterSetFilter); + + /** + * get/set noise amount. Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter. + * @name noise + * @method + * @memberof Konva.Node.prototype + * @param {Number} noise + * @returns {Number} + */ +})(); + +/*eslint-disable max-depth */ +(function () { + 'use strict'; + /** + * Pixelate Filter. Averages groups of pixels and redraws + * them as larger pixels + * @function + * @name Pixelate + * @memberof Konva.Filters + * @param {Object} imageData + * @author ippo615 + * @example + * node.cache(); + * node.filters([Konva.Filters.Pixelate]); + * node.pixelSize(10); + */ + + Konva.Filters.Pixelate = function (imageData) { + + var pixelSize = Math.ceil(this.pixelSize()), + width = imageData.width, + height = imageData.height, + x, y, i, + //pixelsPerBin = pixelSize * pixelSize, + red, green, blue, alpha, + nBinsX = Math.ceil(width / pixelSize), + nBinsY = Math.ceil(height / pixelSize), + xBinStart, xBinEnd, yBinStart, yBinEnd, + xBin, yBin, pixelsInBin; + imageData = imageData.data; + + for (xBin = 0; xBin < nBinsX; xBin += 1) { + for (yBin = 0; yBin < nBinsY; yBin += 1) { + + // Initialize the color accumlators to 0 + red = 0; + green = 0; + blue = 0; + alpha = 0; + + // Determine which pixels are included in this bin + xBinStart = xBin * pixelSize; + xBinEnd = xBinStart + pixelSize; + yBinStart = yBin * pixelSize; + yBinEnd = yBinStart + pixelSize; + + // Add all of the pixels to this bin! + pixelsInBin = 0; + for (x = xBinStart; x < xBinEnd; x += 1) { + if( x >= width ){ continue; } + for (y = yBinStart; y < yBinEnd; y += 1) { + if( y >= height ){ continue; } + i = (width * y + x) * 4; + red += imageData[i + 0]; + green += imageData[i + 1]; + blue += imageData[i + 2]; + alpha += imageData[i + 3]; + pixelsInBin += 1; + } + } + + // Make sure the channels are between 0-255 + red = red / pixelsInBin; + green = green / pixelsInBin; + blue = blue / pixelsInBin; + + // Draw this bin + for (x = xBinStart; x < xBinEnd; x += 1) { + if( x >= width ){ continue; } + for (y = yBinStart; y < yBinEnd; y += 1) { + if( y >= height ){ continue; } + i = (width * y + x) * 4; + imageData[i + 0] = red; + imageData[i + 1] = green; + imageData[i + 2] = blue; + imageData[i + 3] = alpha; + } + } + } + } + + }; + + Konva.Factory.addGetterSetter(Konva.Node, 'pixelSize', 8, null, Konva.Factory.afterSetFilter); + + /** + * get/set pixel size. Use with {@link Konva.Filters.Pixelate} filter. + * @name pixelSize + * @method + * @memberof Konva.Node.prototype + * @param {Integer} pixelSize + * @returns {Integer} + */ +})(); + +(function () { + 'use strict'; + /** + * Threshold Filter. Pushes any value above the mid point to + * the max and any value below the mid point to the min. + * This affects the alpha channel. + * @function + * @name Threshold + * @memberof Konva.Filters + * @param {Object} imageData + * @author ippo615 + * @example + * node.cache(); + * node.filters([Konva.Filters.Threshold]); + * node.threshold(0.1); + */ + + Konva.Filters.Threshold = function (imageData) { + var level = this.threshold() * 255, + data = imageData.data, + len = data.length, + i; + + for (i = 0; i < len; i += 1) { + data[i] = data[i] < level ? 0 : 255; + } + }; + + Konva.Factory.addGetterSetter(Konva.Node, 'threshold', 0.5, null, Konva.Factory.afterSetFilter); + + /** + * get/set threshold. Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter. + * @name threshold + * @method + * @memberof Konva.Node.prototype + * @param {Number} threshold + * @returns {Number} + */ +})(); (function() { 'use strict'; @@ -6377,14 +6487,6 @@ var Konva = {}; (function() { 'use strict'; - - function isValidSelector(selector) { - if (typeof selector !== 'string') { - return false; - } - var firstChar = selector[0]; - return firstChar === '#' || firstChar === '.' || firstChar === firstChar.toUpperCase(); - } /** * Container constructor.  Containers are used to contain nodes or other containers * @constructor @@ -6550,6 +6652,7 @@ var Konva = {}; } // then destroy self Konva.Node.prototype.destroy.call(this); + return this; }, /** * return a {@link Konva.Collection} of nodes that match the selector. Use '#' for id selections @@ -6583,7 +6686,7 @@ var Konva = {}; for (n = 0; n < len; n++) { sel = selectorArr[n]; - if (!isValidSelector(sel)) { + if (!Konva.Util.isValidSelector(sel)) { Konva.Util.warn('Selector "' + sel + '" is invalid. Allowed selectors examples are "#foo", ".bar" or "Group".'); Konva.Util.warn('If you have a custom shape with such className, please change it to start with upper letter like "Triangle".'); Konva.Util.warn('Konva is awesome, right?'); @@ -7195,6 +7298,7 @@ var Konva = {}; destroy: function() { Konva.Node.prototype.destroy.call(this); delete Konva.shapes[this.colorKey]; + return this; }, _useBufferCanvas: function(caching) { return !caching && (this.perfectDrawEnabled() && (this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke() && this.getStage()) || @@ -8472,6 +8576,7 @@ var Konva = {}; CONTENT_TOUCHSTART = 'contentTouchstart', CONTENT_TOUCHEND = 'contentTouchend', CONTENT_DBL_TAP = 'contentDbltap', + CONTENT_TAP = 'contentTap', CONTENT_TOUCHMOVE = 'contentTouchmove', DIV = 'div', @@ -8644,6 +8749,7 @@ var Konva = {}; if (index > -1) { Konva.stages.splice(index, 1); } + return this; }, /** * get pointer position which can be a touch position or mouse position @@ -8750,16 +8856,21 @@ var Konva = {}; * @param {Object} pos * @param {Number} pos.x * @param {Number} pos.y - * @returns {Konva.Shape} + * @param {String} [selector] + * @returns {Konva.Node} + * @example + * var shape = stage.getIntersection({x: 50, y: 50}); + * // or if you interested in shape parent: + * var group = stage.getIntersection({x: 50, y: 50}, 'Group'); */ - getIntersection: function(pos) { + getIntersection: function(pos, selector) { var layers = this.getChildren(), len = layers.length, end = len - 1, n, shape; for(n = end; n >= 0; n--) { - shape = layers[n].getIntersection(pos); + shape = layers[n].getIntersection(pos, selector); if (shape) { return shape; } @@ -9045,8 +9156,9 @@ var Konva = {}; } } // content events + this._fire(CONTENT_TOUCHEND, {evt: evt}); if (Konva.listenClickTap) { - this._fire(CONTENT_TOUCHEND, {evt: evt}); + this._fire(CONTENT_TAP, {evt: evt}); if(fireDblClick) { this._fire(CONTENT_DBL_TAP, {evt: evt}); } @@ -9108,23 +9220,9 @@ var Konva = {}; } // mouse events else { - if (!contentPosition) { - x = evt.offsetX; - y = evt.offetY; - } - // we unfortunately have to use UA detection here because accessing - // the layerX or layerY properties in newer versions of Chrome - // throws a JS warning. layerX and layerY are required for FF - // when the container is transformed via CSS. - else if (Konva.UA.browser === 'mozilla') { - x = evt.layerX || (evt.clientX - contentPosition.left); - y = evt.layerY || (evt.clientY - contentPosition.top); - } else { - x = evt.clientX - contentPosition.left; - y = evt.clientY - contentPosition.top; - } + x = evt.clientX - contentPosition.left; + y = evt.clientY - contentPosition.top; } - if (x !== null && y !== null) { this.pointerPos = { x: x, @@ -9334,16 +9432,17 @@ var Konva = {}; stage.content.removeChild(this.getCanvas()._canvas); stage.content.appendChild(this.getCanvas()._canvas); } + return this; }, // extend Node.prototype.moveUp moveUp: function() { var moved = Konva.Node.prototype.moveUp.call(this); if (!moved){ - return; + return this; } var stage = this.getStage(); if(!stage) { - return; + return this; } stage.content.removeChild(this.getCanvas()._canvas); @@ -9352,6 +9451,7 @@ var Konva = {}; } else { stage.content.appendChild(this.getCanvas()._canvas); } + return this; }, // extend Node.prototype.moveDown moveDown: function() { @@ -9363,6 +9463,7 @@ var Konva = {}; stage.content.insertBefore(this.getCanvas()._canvas, children[this.index + 1].getCanvas()._canvas); } } + return this; }, // extend Node.prototype.moveToBottom moveToBottom: function() { @@ -9374,6 +9475,7 @@ var Konva = {}; stage.content.insertBefore(this.getCanvas()._canvas, children[1].getCanvas()._canvas); } } + return this; }, getLayer: function() { return this; @@ -9393,6 +9495,7 @@ var Konva = {}; }, setSize: function(width, height) { this.canvas.setSize(width, height); + return this; }, /** * get/set width of layer.getter return width of stage. setter doing nothing. @@ -9556,14 +9659,20 @@ var Konva = {}; /** * get visible intersection shape. This is the preferred * method for determining if a point intersects a shape or not + * also you may pass optional selector parametr to return ancestor of intersected shape * @method * @memberof Konva.Layer.prototype * @param {Object} pos * @param {Number} pos.x * @param {Number} pos.y - * @returns {Konva.Shape} + * @param {String} [selector] + * @returns {Konva.Node} + * @example + * var shape = layer.getIntersection({x: 50, y: 50}); + * // or if you interested in shape parent: + * var group = layer.getIntersection({x: 50, y: 50}, 'Group'); */ - getIntersection: function(pos) { + getIntersection: function(pos, selector) { var obj, i, intersectionOffset, shape; if(!this.hitGraphEnabled() || !this.isVisible()) { @@ -9582,7 +9691,9 @@ var Konva = {}; y: pos.y + intersectionOffset.y * spiralSearchDistance }); shape = obj.shape; - if (shape) { + if (shape && selector) { + return shape.findAncestor(selector, true); + } else if (shape) { return shape; } // we should continue search if we found antialiased pixel @@ -9720,6 +9831,7 @@ var Konva = {}; setSize: function(width, height) { Konva.BaseLayer.prototype.setSize.call(this, width, height); this.hitCanvas.setSize(width, height); + return this; } }); Konva.Util.extend(Konva.Layer, Konva.BaseLayer); @@ -9896,9 +10008,9 @@ var Konva = {}; var BATCH_DRAW_STOP_TIME_DIFF = 500; var now = (function() { - if (Konva.root.performance && Konva.root.performance.now) { + if (Konva.global.performance && Konva.global.performance.now) { return function() { - return Konva.root.performance.now(); + return Konva.global.performance.now(); }; } @@ -9912,18 +10024,18 @@ var Konva = {}; } var RAF = (function(){ - return Konva.root.requestAnimationFrame - || Konva.root.webkitRequestAnimationFrame - || Konva.root.mozRequestAnimationFrame - || Konva.root.oRequestAnimationFrame - || Konva.root.msRequestAnimationFrame + return Konva.global.requestAnimationFrame + || Konva.global.webkitRequestAnimationFrame + || Konva.global.mozRequestAnimationFrame + || Konva.global.oRequestAnimationFrame + || Konva.global.msRequestAnimationFrame || FRAF; })(); function requestAnimFrame() { - return RAF.apply(Konva.root, arguments); + return RAF.apply(Konva.global, arguments); } /** @@ -10161,11 +10273,6 @@ var Konva = {}; } }; - var moveTo = Konva.Node.prototype.moveTo; - Konva.Node.prototype.moveTo = function(container) { - moveTo.call(this, container); - }; - /** * batch draw * @method @@ -15703,10 +15810,14 @@ var Konva = {}; pointerDirection = this.getPointerDirection(), pointerWidth = this.getPointerWidth(), pointerHeight = this.getPointerHeight(), - cornerRadius = this.getCornerRadius(); + cornerRadius = Math.min(this.getCornerRadius(), width / 2, height / 2); context.beginPath(); - context.moveTo(0, 0); + if (!cornerRadius) { + context.moveTo(0, 0); + } else { + context.moveTo(cornerRadius, 0); + } if (pointerDirection === UP) { context.lineTo((width - pointerWidth) / 2, 0); @@ -15968,6 +16079,7 @@ var Konva = {}; this.className = 'Arrow'; }, _sceneFunc: function(ctx) { + Konva.Line.prototype._sceneFunc.apply(this, arguments); var PI2 = Math.PI * 2; var points = this.points(); var n = points.length; @@ -15994,14 +16106,12 @@ var Konva = {}; dy = points[3] - points[1]; ctx.rotate((Math.atan2(-dy, -dx) + PI2) % PI2); ctx.moveTo(0, 0); - ctx.lineTo(-10, 6); - ctx.lineTo(-10, -6); + ctx.lineTo(-length, width / 2); + ctx.lineTo(-length, -width / 2); ctx.closePath(); ctx.restore(); } - ctx.fillStrokeShape(this); - Konva.Line.prototype._sceneFunc.apply(this, arguments); } }; diff --git a/scaffolds/page.md b/scaffolds/page.md index 93e57c5e2..e6055b795 100644 --- a/scaffolds/page.md +++ b/scaffolds/page.md @@ -1,2 +1,2 @@ -title: {{ title }} +title: {{ title }} --- \ No newline at end of file diff --git a/scaffolds/post.md b/scaffolds/post.md index 93e57c5e2..e6055b795 100644 --- a/scaffolds/post.md +++ b/scaffolds/post.md @@ -1,2 +1,2 @@ -title: {{ title }} +title: {{ title }} --- \ No newline at end of file diff --git a/scripts/helpers.js b/scripts/helpers.js index b0eec69bb..4bd40fc3f 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -1,55 +1,55 @@ -var links = { - index: 'https://github.com/konvajs/konva' -}; - -hexo.extend.helper.register('github_link', function(data){ - var match = data.file.match(/(\w+)\/lib\/(.+)/), - name = match[1], - path = 'lib/' + match[2]; - - if (name === 'konva') name = 'index'; - - var line = data.line, - version = this.site.yuidoc.findByName(name).project.version || 'master'; - - return '' + path + ':' + line + ''; -}); - -hexo.extend.helper.register('item_flags', function(data){ - var result = ''; - - ['static', 'chainable', 'async', 'final'].forEach(function(i){ - if (data[i]) result += '' + i + ''; - }); - - return result; -}); - -hexo.extend.helper.register('page_nav', function(){ - var sidebar = this.theme.doc_sidebar, - path = this.path.replace(/^docs\//, ""), - // path = this.path, - list = {}; - - for (var i in sidebar){ - for (var j in sidebar[i]){ - list[sidebar[i][j]] = j; - } - } - - - - var keys = Object.keys(list), - index = keys.indexOf(path), - result = []; - - if (index > 0){ - result.push('Prev'); - } - - if (index < keys.length - 1){ - result.push('Next'); - } - - return result.join(''); -}); +var links = { + index: 'https://github.com/konvajs/konva' +}; + +hexo.extend.helper.register('github_link', function(data){ + var match = data.file.match(/(\w+)\/lib\/(.+)/), + name = match[1], + path = 'lib/' + match[2]; + + if (name === 'konva') name = 'index'; + + var line = data.line, + version = this.site.yuidoc.findByName(name).project.version || 'master'; + + return '' + path + ':' + line + ''; +}); + +hexo.extend.helper.register('item_flags', function(data){ + var result = ''; + + ['static', 'chainable', 'async', 'final'].forEach(function(i){ + if (data[i]) result += '' + i + ''; + }); + + return result; +}); + +hexo.extend.helper.register('page_nav', function(){ + var sidebar = this.theme.doc_sidebar, + path = this.path.replace(/^docs\//, ""), + // path = this.path, + list = {}; + + for (var i in sidebar){ + for (var j in sidebar[i]){ + list[sidebar[i][j]] = j; + } + } + + + + var keys = Object.keys(list), + index = keys.indexOf(path), + result = []; + + if (index > 0){ + result.push('Prev'); + } + + if (index < keys.length - 1){ + result.push('Next'); + } + + return result.join(''); +}); diff --git a/scripts/tags.js b/scripts/tags.js index 0474b151e..7f90b4963 100644 --- a/scripts/tags.js +++ b/scripts/tags.js @@ -1,14 +1,14 @@ -hexo.extend.tag.register('note', function(args, content){ - var className = args.shift(), - header = ''; - - if (args.length){ - header += '' + args.join(' ') + ''; - } - - return [ - '
' + header + '', - content, - '
' - ].join('\n\n') + '\n'; +hexo.extend.tag.register('note', function(args, content){ + var className = args.shift(), + header = ''; + + if (args.length){ + header += '' + args.join(' ') + ''; + } + + return [ + '
' + header + '', + content, + '
' + ].join('\n\n') + '\n'; }, {ends: true, escape: false}); \ No newline at end of file diff --git a/source/android-chrome-manifest.json b/source/android-chrome-manifest.json index 2fb56e32d..1c5deec77 100644 --- a/source/android-chrome-manifest.json +++ b/source/android-chrome-manifest.json @@ -1,41 +1,41 @@ -{ - "name": "KonvaJS", - "icons": [ - { - "src": "\/android-chrome-36x36.png", - "sizes": "36x36", - "type": "image\/png", - "density": "0.75" - }, - { - "src": "\/android-chrome-48x48.png", - "sizes": "48x48", - "type": "image\/png", - "density": "1.0" - }, - { - "src": "\/android-chrome-72x72.png", - "sizes": "72x72", - "type": "image\/png", - "density": "1.5" - }, - { - "src": "\/android-chrome-96x96.png", - "sizes": "96x96", - "type": "image\/png", - "density": "2.0" - }, - { - "src": "\/android-chrome-144x144.png", - "sizes": "144x144", - "type": "image\/png", - "density": "3.0" - }, - { - "src": "\/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image\/png", - "density": "4.0" - } - ] -} +{ + "name": "KonvaJS", + "icons": [ + { + "src": "\/android-chrome-36x36.png", + "sizes": "36x36", + "type": "image\/png", + "density": "0.75" + }, + { + "src": "\/android-chrome-48x48.png", + "sizes": "48x48", + "type": "image\/png", + "density": "1.0" + }, + { + "src": "\/android-chrome-72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": "1.5" + }, + { + "src": "\/android-chrome-96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": "2.0" + }, + { + "src": "\/android-chrome-144x144.png", + "sizes": "144x144", + "type": "image\/png", + "density": "3.0" + }, + { + "src": "\/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image\/png", + "density": "4.0" + } + ] +} diff --git a/source/browserconfig.xml b/source/browserconfig.xml index fe44cae80..65380f387 100644 --- a/source/browserconfig.xml +++ b/source/browserconfig.xml @@ -1,12 +1,12 @@ - - - - - - - - - #da532c - - - + + + + + + + + + #da532c + + + diff --git a/source/docs/animations/Create_an_Animation.md b/source/docs/animations/Create_an_Animation.md index 98a38257c..28e64379d 100644 --- a/source/docs/animations/Create_an_Animation.md +++ b/source/docs/animations/Create_an_Animation.md @@ -1,34 +1,34 @@ - -#HTML5 Canvas Konva Animation Tutorial - -To create custom animations with Konva, we can use the `Konva.Animation` -constructor which takes two arguments, the required update function and -an optional layer, or array of layers, that will be updated with each animation frame. -The animation function is passed a `frame` object which contains a `time` property which is the number -of milliseconds that the animation has been running, a `timeDiff` property which -is the number of milliseconds that have passed since the last frame, -and a `frameRate` property which is the current frame rate in frames per second. - -The update function should never redraw the stage or a layer because the animation -engine will intelligently handle that for us. -The update function should only contain logic that updates Node properties, -such as `position`, `rotation`, `scale`, `width`, `height`, `radius`, `colors`, etc. -Once the animation has been created, we can start it at anytime with the `start()` method. - -For a full list of attributes and methods, check out the [Konva.Animation documentation](http://konvajs.github.io/api/Konva.Animation.html). - -##HTML5 Canvas Konva Animation Template - -``` - -``` + +#HTML5 Canvas Konva Animation Tutorial + +To create custom animations with Konva, we can use the `Konva.Animation` +constructor which takes two arguments, the required update function and +an optional layer, or array of layers, that will be updated with each animation frame. +The animation function is passed a `frame` object which contains a `time` property which is the number +of milliseconds that the animation has been running, a `timeDiff` property which +is the number of milliseconds that have passed since the last frame, +and a `frameRate` property which is the current frame rate in frames per second. + +The update function should never redraw the stage or a layer because the animation +engine will intelligently handle that for us. +The update function should only contain logic that updates Node properties, +such as `position`, `rotation`, `scale`, `width`, `height`, `radius`, `colors`, etc. +Once the animation has been created, we can start it at anytime with the `start()` method. + +For a full list of attributes and methods, check out the [Konva.Animation documentation](http://konvajs.github.io/api/Konva.Animation.html). + +##HTML5 Canvas Konva Animation Template + +``` + +``` diff --git a/source/docs/animations/Moving.md b/source/docs/animations/Moving.md index b347b474b..61012fc78 100644 --- a/source/docs/animations/Moving.md +++ b/source/docs/animations/Moving.md @@ -1,11 +1,11 @@ -title: Animate Position ---- - -To animate a shape's position with Konva, we can create a new animation with `Konva.Animation` -which modifies the shape's position with each animation frame. - -For a full list of attributes and methods, check out the [Konva.Animation documentation](http://konvajs.github.io/api/Konva.Animation.html). - -{% iframe /downloads/code/animations/Moving.html %} - +title: Animate Position +--- + +To animate a shape's position with Konva, we can create a new animation with `Konva.Animation` +which modifies the shape's position with each animation frame. + +For a full list of attributes and methods, check out the [Konva.Animation documentation](http://konvajs.github.io/api/Konva.Animation.html). + +{% iframe /downloads/code/animations/Moving.html %} + {% include_code Konva Animate Position Demo animations/Moving.html %} \ No newline at end of file diff --git a/source/docs/animations/Rotation.md b/source/docs/animations/Rotation.md index 0580a25b3..9d4553d0c 100644 --- a/source/docs/animations/Rotation.md +++ b/source/docs/animations/Rotation.md @@ -1,14 +1,14 @@ -title: Rotation Animation ---- - -To animate a shape's rotation with Konva, we can create a new animation with -`Konva.Animation`, and define a function which modifies the shape's rotation with each animation frame. - -In this tutorial, we'll rotate a blue rectangle about the top left corner, -a yellow rectangle about its center, and a red rectangle about an outside point. - -For a full list of attributes and methods, check out the [Konva.Animation documentation](http://konvajs.github.io/api/Konva.Animation.html). - -{% iframe /downloads/code/animations/Rotation.html %} - +title: Rotation Animation +--- + +To animate a shape's rotation with Konva, we can create a new animation with +`Konva.Animation`, and define a function which modifies the shape's rotation with each animation frame. + +In this tutorial, we'll rotate a blue rectangle about the top left corner, +a yellow rectangle about its center, and a red rectangle about an outside point. + +For a full list of attributes and methods, check out the [Konva.Animation documentation](http://konvajs.github.io/api/Konva.Animation.html). + +{% iframe /downloads/code/animations/Rotation.html %} + {% include_code Konva Rotation Animation Demo animations/Rotation.html %} \ No newline at end of file diff --git a/source/docs/animations/Scaling.md b/source/docs/animations/Scaling.md index 34efc054b..531cddc27 100644 --- a/source/docs/animations/Scaling.md +++ b/source/docs/animations/Scaling.md @@ -1,16 +1,16 @@ -title: Scale Animation ---- - -To animate a shape's scale with Konva, we can create a new animation with -`Konva.Animation`, and define a function which modifies the shape's scale with each animation frame. - -In this tutorial, we'll scale the x and y component of a blue hexagon, the y component -of a yellow hexagon, and the x component of a red hexagon about an axis positioned on the right side of the shape. - -Instructions: drag and drop the hexagons as they animate - -For a full list of attributes and methods, check out the [Konva.Animation documentation](http://konvajs.github.io/api/Konva.Animation.html). - -{% iframe /downloads/code/animations/Scaling.html %} - +title: Scale Animation +--- + +To animate a shape's scale with Konva, we can create a new animation with +`Konva.Animation`, and define a function which modifies the shape's scale with each animation frame. + +In this tutorial, we'll scale the x and y component of a blue hexagon, the y component +of a yellow hexagon, and the x component of a red hexagon about an axis positioned on the right side of the shape. + +Instructions: drag and drop the hexagons as they animate + +For a full list of attributes and methods, check out the [Konva.Animation documentation](http://konvajs.github.io/api/Konva.Animation.html). + +{% iframe /downloads/code/animations/Scaling.html %} + {% include_code Konva Scale Animation Demo animations/Scaling.html %} \ No newline at end of file diff --git a/source/docs/animations/Stop_Animation.md b/source/docs/animations/Stop_Animation.md index 71d988f44..2cce9250a 100644 --- a/source/docs/animations/Stop_Animation.md +++ b/source/docs/animations/Stop_Animation.md @@ -1,13 +1,13 @@ -title: Stop Animation ---- - -To stop an animation with Konva, we can use the `stop()` method. -To restart the animation, we can again call the `start()`. - -Instructions: Click on "Start" to start the animation and "Stop" to stop the animation. - -For a full list of attributes and methods, check out the [Konva.Animation documentation](http://konvajs.github.io/api/Konva.Animation.html). - -{% iframe /downloads/code/animations/Stop_Animation.html %} - +title: Stop Animation +--- + +To stop an animation with Konva, we can use the `stop()` method. +To restart the animation, we can again call the `start()`. + +Instructions: Click on "Start" to start the animation and "Stop" to stop the animation. + +For a full list of attributes and methods, check out the [Konva.Animation documentation](http://konvajs.github.io/api/Konva.Animation.html). + +{% iframe /downloads/code/animations/Stop_Animation.html %} + {% include_code Konva Stop Animation Demo animations/Stop_Animation.html %} \ No newline at end of file diff --git a/source/docs/data_&_serialization/Complex_Load.md b/source/docs/data_&_serialization/Complex_Load.md index 414b37599..fd6f85338 100644 --- a/source/docs/data_&_serialization/Complex_Load.md +++ b/source/docs/data_&_serialization/Complex_Load.md @@ -1,11 +1,11 @@ -title: Load Complex Stage ---- - -To load a complex stage that originally contained images and event bindings using Konva, -we need to create a stage node using `Konva.Node.create()`, and then set the -images and event handlers with the help of selectors using the `get()` method. -Images and event handlers must be manually set because they aren't serializable. - -{% iframe /downloads/code/data_&_serialization/Complex_Load.html %} - -{% include_code Konva Load Complex Stage Demo data_&_serialization/Complex_Load.html %} +title: Load Complex Stage +--- + +To load a complex stage that originally contained images and event bindings using Konva, +we need to create a stage node using `Konva.Node.create()`, and then set the +images and event handlers with the help of selectors using the `get()` method. +Images and event handlers must be manually set because they aren't serializable. + +{% iframe /downloads/code/data_&_serialization/Complex_Load.html %} + +{% include_code Konva Load Complex Stage Demo data_&_serialization/Complex_Load.html %} diff --git a/source/docs/data_&_serialization/Serialize_a_Stage.md b/source/docs/data_&_serialization/Serialize_a_Stage.md index 5d198405e..d94ffa19a 100644 --- a/source/docs/data_&_serialization/Serialize_a_Stage.md +++ b/source/docs/data_&_serialization/Serialize_a_Stage.md @@ -1,11 +1,11 @@ -title: Save Stage as JSON String ---- - -To save the stage as a JSON string with Konva, we can use the `toJSON()` -method which serializes the Konva Node tree into text which can be saved -in web storage or in an offline database. We can also serialize other nodes, -including layers, groups, and shapes. - -{% iframe /downloads/code/data_&_serialization/Serialize_a_Stage.html %} - -{% include_code Konva Save Stage Demo data_&_serialization/Serialize_a_Stage.html %} +title: Save Stage as JSON String +--- + +To save the stage as a JSON string with Konva, we can use the `toJSON()` +method which serializes the Konva Node tree into text which can be saved +in web storage or in an offline database. We can also serialize other nodes, +including layers, groups, and shapes. + +{% iframe /downloads/code/data_&_serialization/Serialize_a_Stage.html %} + +{% include_code Konva Save Stage Demo data_&_serialization/Serialize_a_Stage.html %} diff --git a/source/docs/data_&_serialization/Simple_Load.md b/source/docs/data_&_serialization/Simple_Load.md index 78d1fa2d0..a43e40aa2 100644 --- a/source/docs/data_&_serialization/Simple_Load.md +++ b/source/docs/data_&_serialization/Simple_Load.md @@ -1,10 +1,10 @@ -title: Load Stage with JSON String ---- - -To deserialize a JSON string with Konva, we can use the `Konva.Node.create()` -method which creates a node from a JSON string. If we want to deserialize -a stage node, we can also pass in an optional `container` parameter. - -{% iframe /downloads/code/data_&_serialization/Simple_Load.html %} - -{% include_code Konva Simple Load Demo data_&_serialization/Simple_Load.html %} +title: Load Stage with JSON String +--- + +To deserialize a JSON string with Konva, we can use the `Konva.Node.create()` +method which creates a node from a JSON string. If we want to deserialize +a stage node, we can also pass in an optional `container` parameter. + +{% iframe /downloads/code/data_&_serialization/Simple_Load.html %} + +{% include_code Konva Simple Load Demo data_&_serialization/Simple_Load.html %} diff --git a/source/docs/data_&_serialization/Stage_Data_URL.md b/source/docs/data_&_serialization/Stage_Data_URL.md index 316cf9d8e..7022c87ba 100644 --- a/source/docs/data_&_serialization/Stage_Data_URL.md +++ b/source/docs/data_&_serialization/Stage_Data_URL.md @@ -1,17 +1,17 @@ -title: Stage Data URL ---- - -To get the data URL of the stage with Konva, we can use the `toDataURL()` -method which requires a callback function for `Stage` (for other nodes callback is not required). -In addition, we can also pass in a mime type such as image/jpeg and a quality value that ranges between 0 and 1. -We can also get the data URLs of specific nodes, including layers, groups, and shapes. - -*Note: The `toDataURL()` method requires that any images drawn onto the canvas -are hosted on a web server with the same domain as the code executing it. -If this condition is not met, a SECURITY_ERR exception is thrown.* - -Instructions: Drag and drop the rectangle and then click on the save button to get the composite data url and open the resulting image in a new window - -{% iframe /downloads/code/data_&_serialization/Stage_Data_URL.html %} - -{% include_code Konva Stage Data URL Demo data_&_serialization/Stage_Data_URL.html %} +title: Stage Data URL +--- + +To get the data URL of the stage with Konva, we can use the `toDataURL()` +method which requires a callback function for `Stage` (for other nodes callback is not required). +In addition, we can also pass in a mime type such as image/jpeg and a quality value that ranges between 0 and 1. +We can also get the data URLs of specific nodes, including layers, groups, and shapes. + +*Note: The `toDataURL()` method requires that any images drawn onto the canvas +are hosted on a web server with the same domain as the code executing it. +If this condition is not met, a SECURITY_ERR exception is thrown.* + +Instructions: Drag and drop the rectangle and then click on the save button to get the composite data url and open the resulting image in a new window + +{% iframe /downloads/code/data_&_serialization/Stage_Data_URL.html %} + +{% include_code Konva Stage Data URL Demo data_&_serialization/Stage_Data_URL.html %} diff --git a/source/docs/drag_and_drop/Complex_Drag_and_Drop.md b/source/docs/drag_and_drop/Complex_Drag_and_Drop.md index 142363ce4..6b0ca84bd 100644 --- a/source/docs/drag_and_drop/Complex_Drag_and_Drop.md +++ b/source/docs/drag_and_drop/Complex_Drag_and_Drop.md @@ -1,14 +1,14 @@ -title: Complex Drag and Drop Bounds ---- - -To bound the movement of nodes being dragged and dropped inside regions with -Konva, we can use the `dragBoundFunc` property to define boundaries that -the node cannot cross. - -Instructions: Drag and drop the the light blue rectangle and observe that it -is bound below an imaginary boundary at y = 50. Drag and drop the yellow -rectangle and observe that it is bound inside of an imaginary circle. - -{% iframe /downloads/code/drag_and_drop/Complex_Drag_and_Drop.html %} - +title: Complex Drag and Drop Bounds +--- + +To bound the movement of nodes being dragged and dropped inside regions with +Konva, we can use the `dragBoundFunc` property to define boundaries that +the node cannot cross. + +Instructions: Drag and drop the the light blue rectangle and observe that it +is bound below an imaginary boundary at y = 50. Drag and drop the yellow +rectangle and observe that it is bound inside of an imaginary circle. + +{% iframe /downloads/code/drag_and_drop/Complex_Drag_and_Drop.html %} + {% include_code Konva Complex Drag and Drop Bounds Demo drag_and_drop/Complex_Drag_and_Drop.html %} \ No newline at end of file diff --git a/source/docs/drag_and_drop/Drag_Events.md b/source/docs/drag_and_drop/Drag_Events.md index fe7f061f0..591d0d125 100644 --- a/source/docs/drag_and_drop/Drag_Events.md +++ b/source/docs/drag_and_drop/Drag_Events.md @@ -1,10 +1,10 @@ -title: Drag and Drop Events ---- - -To detect drag and drop events with Konva, we can use the `on()` method to -bind `dragstart`, `dragmove`, or `dragend` events to a node. -The `on()` method requires an event type and a function to be executed when the event occurs. - -{% iframe /downloads/code/drag_and_drop/Drag_Events.html %} - +title: Drag and Drop Events +--- + +To detect drag and drop events with Konva, we can use the `on()` method to +bind `dragstart`, `dragmove`, or `dragend` events to a node. +The `on()` method requires an event type and a function to be executed when the event occurs. + +{% iframe /downloads/code/drag_and_drop/Drag_Events.html %} + {% include_code Konva Drag Events Demo drag_and_drop/Drag_Events.html %} \ No newline at end of file diff --git a/source/docs/drag_and_drop/Drag_a_Group.md b/source/docs/drag_and_drop/Drag_a_Group.md index faf2d3a7f..1888e6ecf 100644 --- a/source/docs/drag_and_drop/Drag_a_Group.md +++ b/source/docs/drag_and_drop/Drag_a_Group.md @@ -1,9 +1,9 @@ -title: Drag and Drop a Group ---- - -To drag and drop groups with Konva, we can set the `draggable` property -of the config object to `true` when the group is instantiated, or we can use the `draggable()` method. - -{% iframe /downloads/code/drag_and_drop/Drag_a_Group.html %} - +title: Drag and Drop a Group +--- + +To drag and drop groups with Konva, we can set the `draggable` property +of the config object to `true` when the group is instantiated, or we can use the `draggable()` method. + +{% iframe /downloads/code/drag_and_drop/Drag_a_Group.html %} + {% include_code Konva Drag and Drop the Group Demo drag_and_drop/Drag_a_Group.html %} \ No newline at end of file diff --git a/source/docs/drag_and_drop/Drag_a_Line.md b/source/docs/drag_and_drop/Drag_a_Line.md index 43b07c7e6..776c46fd8 100644 --- a/source/docs/drag_and_drop/Drag_a_Line.md +++ b/source/docs/drag_and_drop/Drag_a_Line.md @@ -1,9 +1,9 @@ -title: Drag and Drop a Line ---- - -To drag and drop a line with Konva, we can set the `draggable` property -of the config object to `true` when the group is instantiated, or we can use the `draggable()` method. - -{% iframe /downloads/code/drag_and_drop/Drag_a_Line.html %} - +title: Drag and Drop a Line +--- + +To drag and drop a line with Konva, we can set the `draggable` property +of the config object to `true` when the group is instantiated, or we can use the `draggable()` method. + +{% iframe /downloads/code/drag_and_drop/Drag_a_Line.html %} + {% include_code Konva Drag and Drop the Line Demo drag_and_drop/Drag_a_Line.html %} \ No newline at end of file diff --git a/source/docs/drag_and_drop/Drag_a_Stage.md b/source/docs/drag_and_drop/Drag_a_Stage.md index 7ad4de227..7e3b73b57 100644 --- a/source/docs/drag_and_drop/Drag_a_Stage.md +++ b/source/docs/drag_and_drop/Drag_a_Stage.md @@ -1,12 +1,12 @@ -title: Drag and Drop the Stage ---- - -To drag and drop a stage with Konva, we can set the `draggable` property -of the config object to `true` when the group is instantiated, or we can use the `draggable()` method. - -Unlike drag and drop for other nodes, such as shapes, groups, and layers, -we can drag the entire stage by dragging any portion of the stage. - -{% iframe /downloads/code/drag_and_drop/Drag_a_Stage.html %} - +title: Drag and Drop the Stage +--- + +To drag and drop a stage with Konva, we can set the `draggable` property +of the config object to `true` when the group is instantiated, or we can use the `draggable()` method. + +Unlike drag and drop for other nodes, such as shapes, groups, and layers, +we can drag the entire stage by dragging any portion of the stage. + +{% iframe /downloads/code/drag_and_drop/Drag_a_Stage.html %} + {% include_code Konva Drag and Drop the Stage Demo drag_and_drop/Drag_a_Stage.html %} \ No newline at end of file diff --git a/source/docs/drag_and_drop/Drag_an_Image.md b/source/docs/drag_and_drop/Drag_an_Image.md index a00a7515e..049c29efb 100644 --- a/source/docs/drag_and_drop/Drag_an_Image.md +++ b/source/docs/drag_and_drop/Drag_an_Image.md @@ -1,11 +1,11 @@ -title: Drag and Drop an Image ---- - -To drag and drop an image with Konva, we can set the `draggable` property -to true when we instantiate a shape, or we can use the `draggable()` method. -The `draggable()` method enables drag and drop for both desktop and mobile -applications automatically. - -{% iframe /downloads/code/drag_and_drop/Drag_an_Image.html %} - +title: Drag and Drop an Image +--- + +To drag and drop an image with Konva, we can set the `draggable` property +to true when we instantiate a shape, or we can use the `draggable()` method. +The `draggable()` method enables drag and drop for both desktop and mobile +applications automatically. + +{% iframe /downloads/code/drag_and_drop/Drag_an_Image.html %} + {% include_code Konva Drag and Drop an Image Demo drag_and_drop/Drag_an_Image.html %} \ No newline at end of file diff --git a/source/docs/drag_and_drop/Drag_and_Drop.md b/source/docs/drag_and_drop/Drag_and_Drop.md index c0469e37f..99c681903 100644 --- a/source/docs/drag_and_drop/Drag_and_Drop.md +++ b/source/docs/drag_and_drop/Drag_and_Drop.md @@ -1,15 +1,15 @@ -title: Drag and Drop Tutorial ---- - -To drag and drop shapes with Konva, we can set the `draggable` property -to true when we instantiate a shape, or we can use the `draggable()` method. -The `draggable()` method enables drag and drop for both desktop and mobile -applications automatically. - -To detect drag and drop events with Konva, we can use the `on()` method to -bind `dragstart`, `dragmove`, or `dragend` events to a node. -The `on()` method requires an event type and a function to be executed when the event occurs. - -{% iframe /downloads/code/drag_and_drop/Drag_and_Drop.html %} - +title: Drag and Drop Tutorial +--- + +To drag and drop shapes with Konva, we can set the `draggable` property +to true when we instantiate a shape, or we can use the `draggable()` method. +The `draggable()` method enables drag and drop for both desktop and mobile +applications automatically. + +To detect drag and drop events with Konva, we can use the `on()` method to +bind `dragstart`, `dragmove`, or `dragend` events to a node. +The `on()` method requires an event type and a function to be executed when the event occurs. + +{% iframe /downloads/code/drag_and_drop/Drag_and_Drop.html %} + {% include_code Konva Drag and Drop Demo drag_and_drop/Drag_and_Drop.html %} \ No newline at end of file diff --git a/source/docs/drag_and_drop/Drop_Events.md b/source/docs/drag_and_drop/Drop_Events.md index f19035bee..e41142fc9 100644 --- a/source/docs/drag_and_drop/Drop_Events.md +++ b/source/docs/drag_and_drop/Drop_Events.md @@ -1,13 +1,13 @@ -title: Drop Events ---- - -Konva does not support drop events. But you can write your own drop events detections. -To detect drop target shape you have to move dragging object into another layer. - -In this example you can see implementation of `drop`, `dragenter`, `dragleave`, `dragover` events. - -Instructions: drag one shape over another. Or drag and drop one shape into another. - -{% iframe /downloads/code/drag_and_drop/Drop_Events.html %} - +title: Drop Events +--- + +Konva does not support drop events. But you can write your own drop events detections. +To detect drop target shape you have to move dragging object into another layer. + +In this example you can see implementation of `drop`, `dragenter`, `dragleave`, `dragover` events. + +Instructions: drag one shape over another. Or drag and drop one shape into another. + +{% iframe /downloads/code/drag_and_drop/Drop_Events.html %} + {% include_code Konva Drop Events Demo drag_and_drop/Drop_Events.html %} \ No newline at end of file diff --git a/source/docs/drag_and_drop/Simple_Drag_Bounds.md b/source/docs/drag_and_drop/Simple_Drag_Bounds.md index 36a483022..5263eff89 100644 --- a/source/docs/drag_and_drop/Simple_Drag_Bounds.md +++ b/source/docs/drag_and_drop/Simple_Drag_Bounds.md @@ -1,16 +1,16 @@ -title: Simple Drag Bounds ---- - -To restrict the movement of shapes being dragged and dropped with Konva, -we can use the `dragBoundsFunc` property which is a user defined function that -overrides the drag and drop position. This function can be used to constrain -the drag and drop movement in all kinds of ways, such as constraining the motion -horizontally, vertically, diagonally, or radially, or even constrain the node -to stay inside of a box, circle, or any other path. - -Instructions: Drag and drop the the horizontal text and observe that it can only -move horizontally. Drag and drop the vertical text and observe that it can only move vertically. - -{% iframe /downloads/code/drag_and_drop/Simple_Drag_Bounds.html %} - +title: Simple Drag Bounds +--- + +To restrict the movement of shapes being dragged and dropped with Konva, +we can use the `dragBoundsFunc` property which is a user defined function that +overrides the drag and drop position. This function can be used to constrain +the drag and drop movement in all kinds of ways, such as constraining the motion +horizontally, vertically, diagonally, or radially, or even constrain the node +to stay inside of a box, circle, or any other path. + +Instructions: Drag and drop the the horizontal text and observe that it can only +move horizontally. Drag and drop the vertical text and observe that it can only move vertically. + +{% iframe /downloads/code/drag_and_drop/Simple_Drag_Bounds.html %} + {% include_code Konva Simple Drag Bounds Demo drag_and_drop/Simple_Drag_Bounds.html %} \ No newline at end of file diff --git a/source/docs/events/Binding_Events.md b/source/docs/events/Binding_Events.md index 533efae88..110ed6a2c 100644 --- a/source/docs/events/Binding_Events.md +++ b/source/docs/events/Binding_Events.md @@ -1,13 +1,13 @@ - -#HTML5 Canvas Shape Events with Konva - -To detect shape events with Konva, we can use the `on()` method to bind event handlers to a node. - -The `on()` method requires an event type and a function to be executed when the event occurs. -Konva supports `mouseover`, `mouseout`, `mouseenter`, `mouseleave`, `mousemove`, `mousedown`, `mouseup`, `mousewheel`, `click`, `dblclick`, `dragstart`, `dragmove`, and `dragend` desktop events. - -Instructions: Mouseover and mouseout of the triangle, and mouseover, mouseout, mousedown, and mouseup over the circle. - -{% iframe /downloads/code/events/Binding_Events.html %} - -{% include_code Konva Binding_Events Demo events/Binding_Events.html %} + +#HTML5 Canvas Shape Events with Konva + +To detect shape events with Konva, we can use the `on()` method to bind event handlers to a node. + +The `on()` method requires an event type and a function to be executed when the event occurs. +Konva supports `mouseover`, `mouseout`, `mouseenter`, `mouseleave`, `mousemove`, `mousedown`, `mouseup`, `mousewheel`, `click`, `dblclick`, `dragstart`, `dragmove`, and `dragend` desktop events. + +Instructions: Mouseover and mouseout of the triangle, and mouseover, mouseout, mousedown, and mouseup over the circle. + +{% iframe /downloads/code/events/Binding_Events.html %} + +{% include_code Konva Binding_Events Demo events/Binding_Events.html %} diff --git a/source/docs/events/Cancel_Propagation.md b/source/docs/events/Cancel_Propagation.md index 6b4b92962..8ade11150 100644 --- a/source/docs/events/Cancel_Propagation.md +++ b/source/docs/events/Cancel_Propagation.md @@ -1,13 +1,13 @@ - -#HTML5 Canvas Cancel Event Bubble Propagation with Konva - -To cancel event bubble propagation with Konva, we can set the `cancelBubble` -property of the Event object to true. - -Instructions: Click on the circle to observe that only the circle event binding -is handled because the event propagation was canceled when the circle event was triggered, -therefore preventing the event object from bubbling upwards. - -{% iframe /downloads/code/events/Cancel_Propagation.html %} - -{% include_code Konva Cancel_Propagation Demo events/Cancel_Propagation.html %} + +#HTML5 Canvas Cancel Event Bubble Propagation with Konva + +To cancel event bubble propagation with Konva, we can set the `cancelBubble` +property of the Event object to true. + +Instructions: Click on the circle to observe that only the circle event binding +is handled because the event propagation was canceled when the circle event was triggered, +therefore preventing the event object from bubbling upwards. + +{% iframe /downloads/code/events/Cancel_Propagation.html %} + +{% include_code Konva Cancel_Propagation Demo events/Cancel_Propagation.html %} diff --git a/source/docs/events/Custom_Hit_Region.md b/source/docs/events/Custom_Hit_Region.md index d4006d885..1cfa7b67f 100644 --- a/source/docs/events/Custom_Hit_Region.md +++ b/source/docs/events/Custom_Hit_Region.md @@ -1,17 +1,17 @@ - -#HTML5 Canvas Konva Custom Hit Function Tutorial - -To create a custom hit draw function for a shape with Konva, we can set -the `drawHitFunc` property. A hit draw function is the function that Konva -will use to draw a region used for hit detection. Using a custom draw hit -function can have several benefits, such as making the hit region larger -so that it's easier for users to interact with a shape, making some portions -of a shape detectable and others not, or simplifying the hit draw function -in order to improve rendering performance. - -Instructions: Mouseover, mouseout, mousedown, and mouseup over the star and -observe that the hit region is an over sized circle encompassing the shape. - -{% iframe /downloads/code/events/Custom_Hit_Region.html %} - -{% include_code Konva Custom_Hit_Region Demo events/Custom_Hit_Region.html %} + +#HTML5 Canvas Konva Custom Hit Function Tutorial + +To create a custom hit draw function for a shape with Konva, we can set +the `drawHitFunc` property. A hit draw function is the function that Konva +will use to draw a region used for hit detection. Using a custom draw hit +function can have several benefits, such as making the hit region larger +so that it's easier for users to interact with a shape, making some portions +of a shape detectable and others not, or simplifying the hit draw function +in order to improve rendering performance. + +Instructions: Mouseover, mouseout, mousedown, and mouseup over the star and +observe that the hit region is an over sized circle encompassing the shape. + +{% iframe /downloads/code/events/Custom_Hit_Region.html %} + +{% include_code Konva Custom_Hit_Region Demo events/Custom_Hit_Region.html %} diff --git a/source/docs/events/Desktop_and_Mobile.md b/source/docs/events/Desktop_and_Mobile.md index c269ad3a5..9caa6442d 100644 --- a/source/docs/events/Desktop_and_Mobile.md +++ b/source/docs/events/Desktop_and_Mobile.md @@ -1,13 +1,13 @@ - -#HTML5 Canvas Desktop and Mobile Events Support Tutorial - -To add event handlers to shapes that work for both desktop and mobile applications with Konva, we can use the `on()` method and pass in paired events. -For example, in order for the mousedown event to be triggered on desktop and mobile applications, we can use the "mousedown touchstart" event pair to cover both mediums. -In order for the mouseup event to be triggered on both desktop and mobile applications, we can use the "mouseup touchend" event pair. -We can also use the "dblclick dbltap" event pair to bind a double click event that works for both desktop and mobile devices. - -Instructions: Mousedown, mouseup, touchstart, or touchend the circle on either a desktop or mobile device to observe the same functionality. - -{% iframe /downloads/code/events/Desktop_and_Mobile.html %} - -{% include_code Konva Desktop_and_Mobile Demo events/Desktop_and_Mobile.html %} + +#HTML5 Canvas Desktop and Mobile Events Support Tutorial + +To add event handlers to shapes that work for both desktop and mobile applications with Konva, we can use the `on()` method and pass in paired events. +For example, in order for the mousedown event to be triggered on desktop and mobile applications, we can use the "mousedown touchstart" event pair to cover both mediums. +In order for the mouseup event to be triggered on both desktop and mobile applications, we can use the "mouseup touchend" event pair. +We can also use the "dblclick dbltap" event pair to bind a double click event that works for both desktop and mobile devices. + +Instructions: Mousedown, mouseup, touchstart, or touchend the circle on either a desktop or mobile device to observe the same functionality. + +{% iframe /downloads/code/events/Desktop_and_Mobile.html %} + +{% include_code Konva Desktop_and_Mobile Demo events/Desktop_and_Mobile.html %} diff --git a/source/docs/events/Event_Delegation.md b/source/docs/events/Event_Delegation.md index a3583df6b..f040e7ba0 100644 --- a/source/docs/events/Event_Delegation.md +++ b/source/docs/events/Event_Delegation.md @@ -1,14 +1,14 @@ - -#HTML5 Canvas Event Delegation with Konva - -To get the event target with Konva, we can access the `target` property -of the Event object. This is particularly useful when using event delegation, -in which we can bind an event handler to a parent node, and listen to events -that occur on its children. - -Instructions: Click on the star and observe that the layer event binding -correctly identifies the shape that was clicked on. - -{% iframe /downloads/code/events/Event_Delegation.html %} - + +#HTML5 Canvas Event Delegation with Konva + +To get the event target with Konva, we can access the `target` property +of the Event object. This is particularly useful when using event delegation, +in which we can bind an event handler to a parent node, and listen to events +that occur on its children. + +Instructions: Click on the star and observe that the layer event binding +correctly identifies the shape that was clicked on. + +{% iframe /downloads/code/events/Event_Delegation.html %} + {% include_code Konva Event_Delegation Demo events/Event_Delegation.html %} \ No newline at end of file diff --git a/source/docs/events/Fire_Events.md b/source/docs/events/Fire_Events.md index ce380ad51..b07367d7b 100644 --- a/source/docs/events/Fire_Events.md +++ b/source/docs/events/Fire_Events.md @@ -1,10 +1,10 @@ - -#HTML5 Canvas Fire Event with Konva - -To fire events with Konva, we can use the `fire()` method. -This enables us to programmatically fire events like `click`, `mouseover`, -`mousemove`, etc., and also fire custom events, like foo and bar. - -{% iframe /downloads/code/events/Fire_Events.html %} - + +#HTML5 Canvas Fire Event with Konva + +To fire events with Konva, we can use the `fire()` method. +This enables us to programmatically fire events like `click`, `mouseover`, +`mousemove`, etc., and also fire custom events, like foo and bar. + +{% iframe /downloads/code/events/Fire_Events.html %} + {% include_code Konva Fire_Events Demo events/Fire_Events.html %} \ No newline at end of file diff --git a/source/docs/events/Image_Events.md b/source/docs/events/Image_Events.md index 0c3fa8df9..386072187 100644 --- a/source/docs/events/Image_Events.md +++ b/source/docs/events/Image_Events.md @@ -1,13 +1,13 @@ - -#HTML5 Canvas Image Events with Konva - -To only detect events for non transparent pixels in an image with Konva, we can use the `drawHitFromCache()` method to generate a more precise image hit region. -By default, events can be triggered for any pixel inside of an image, even if it's transparent. The `drawHitFromCache()` method also accepts an optional callback method to be executed whenever the image hit region has been created. - -*Note: The `drawHitFromCache()` method requires that the image is hosted on a web server with the same domain as the code executing it.* - -Instructions: Mouse over the monkey and the lion and observe the mouseover event bindings. Notice that the event is triggered for the monkey if you mouseover any portion of the image, including transparent pixels. Since we created an image hit region for the lion, transparent pixels are ignored, which enables more precise event detection. - -{% iframe /downloads/code/events/Image_Events.html %} - + +#HTML5 Canvas Image Events with Konva + +To only detect events for non transparent pixels in an image with Konva, we can use the `drawHitFromCache()` method to generate a more precise image hit region. +By default, events can be triggered for any pixel inside of an image, even if it's transparent. The `drawHitFromCache()` method also accepts an optional callback method to be executed whenever the image hit region has been created. + +*Note: The `drawHitFromCache()` method requires that the image is hosted on a web server with the same domain as the code executing it.* + +Instructions: Mouse over the monkey and the lion and observe the mouseover event bindings. Notice that the event is triggered for the monkey if you mouseover any portion of the image, including transparent pixels. Since we created an image hit region for the lion, transparent pixels are ignored, which enables more precise event detection. + +{% iframe /downloads/code/events/Image_Events.html %} + {% include_code Konva Image_Events Demo events/Image_Events.html %} \ No newline at end of file diff --git a/source/docs/events/Listen_for_Events.md b/source/docs/events/Listen_for_Events.md index 17fab0864..bc5598f22 100644 --- a/source/docs/events/Listen_for_Events.md +++ b/source/docs/events/Listen_for_Events.md @@ -1,15 +1,15 @@ - -#HTML5 Canvas Listen or Don’t Listen to Events with Konva - -To listen or don't listen to events with Konva, we can set the listening -property of the config object to true or false when a shape is instantiated, -or we can set the listening property with the `setListening()` method. -Once we've set the listening property for one or more nodes, we'll also need -to redraw the hit graph for each affected layer with the `drawHit()` method. - -Instructions: Mouseover the oval to observe that the event handler is not executed. -Click on "Listen" to start listening for events and observe that the event handler is now executed. - -{% iframe /downloads/code/events/Listen_for_Events.html %} - + +#HTML5 Canvas Listen or Don’t Listen to Events with Konva + +To listen or don't listen to events with Konva, we can set the listening +property of the config object to true or false when a shape is instantiated, +or we can set the listening property with the `setListening()` method. +Once we've set the listening property for one or more nodes, we'll also need +to redraw the hit graph for each affected layer with the `drawHit()` method. + +Instructions: Mouseover the oval to observe that the event handler is not executed. +Click on "Listen" to start listening for events and observe that the event handler is now executed. + +{% iframe /downloads/code/events/Listen_for_Events.html %} + {% include_code Konva Listen_for_Events Demo events/Listen_for_Events.html %} \ No newline at end of file diff --git a/source/docs/events/Mobile_Events.md b/source/docs/events/Mobile_Events.md index 7940b77fb..ff74b51fa 100644 --- a/source/docs/events/Mobile_Events.md +++ b/source/docs/events/Mobile_Events.md @@ -1,14 +1,14 @@ - -#HTML5 Canvas Mobile Touch Events Tutorial - -To bind event handlers to shapes on a mobile device with Konva, we can use the `on()` method. -The `on()` method requires an event type and a function to be executed when the event occurs. -Konva supports `touchstart`, `touchmove`, `touchend`, `tap`, `dbltap`, `dragstart`, `dragmove`, and `dragend` mobile events. - -*Note: This example only works on iOS and Android mobile devices because it makes use of touch events rather than mouse events.* - -Instructions: move your finger across the triangle to see touch coordinates and touch start and touch end the circle. - -{% iframe /downloads/code/events/Mobile_Events.html %} - + +#HTML5 Canvas Mobile Touch Events Tutorial + +To bind event handlers to shapes on a mobile device with Konva, we can use the `on()` method. +The `on()` method requires an event type and a function to be executed when the event occurs. +Konva supports `touchstart`, `touchmove`, `touchend`, `tap`, `dbltap`, `dragstart`, `dragmove`, and `dragend` mobile events. + +*Note: This example only works on iOS and Android mobile devices because it makes use of touch events rather than mouse events.* + +Instructions: move your finger across the triangle to see touch coordinates and touch start and touch end the circle. + +{% iframe /downloads/code/events/Mobile_Events.html %} + {% include_code Konva Mobile_Events Demo events/Mobile_Events.html %} \ No newline at end of file diff --git a/source/docs/events/Multi_Event.md b/source/docs/events/Multi_Event.md index 26d3c1569..854ef669c 100644 --- a/source/docs/events/Multi_Event.md +++ b/source/docs/events/Multi_Event.md @@ -1,10 +1,10 @@ - -#HTML5 Canvas Multi-Event Binding Tutorial - -To bind multiple events to a single handler with Konva, we can use the `on()` method and pass in a space delimited string containing multiple event types. - -Instructions: Mouseover, mousedown, and mouseup over the circle to observe that the function bound to the circle is executed for each event. - -{% iframe /downloads/code/events/Multi_Event.html %} - + +#HTML5 Canvas Multi-Event Binding Tutorial + +To bind multiple events to a single handler with Konva, we can use the `on()` method and pass in a space delimited string containing multiple event types. + +Instructions: Mouseover, mousedown, and mouseup over the circle to observe that the function bound to the circle is executed for each event. + +{% iframe /downloads/code/events/Multi_Event.html %} + {% include_code Konva Multi_Event Demo events/Multi_Event.html %} \ No newline at end of file diff --git a/source/docs/events/Remove_Event.md b/source/docs/events/Remove_Event.md index ee770a28b..23876d658 100644 --- a/source/docs/events/Remove_Event.md +++ b/source/docs/events/Remove_Event.md @@ -1,13 +1,13 @@ - -#HTML5 Canvas Remove Event Listener with Konva - -To remove an event listener with Konva, we can use the `off()` method of -a shape object which requires an event type such as click or mousedown. - -Instructions: Click on the circle to see an alert triggered from the onclick -event binding. Remove the event listener by clicking on the button and again -click on the circle to observe that the event binding has been removed. - -{% iframe /downloads/code/events/Remove_Event.html %} - + +#HTML5 Canvas Remove Event Listener with Konva + +To remove an event listener with Konva, we can use the `off()` method of +a shape object which requires an event type such as click or mousedown. + +Instructions: Click on the circle to see an alert triggered from the onclick +event binding. Remove the event listener by clicking on the button and again +click on the circle to observe that the event binding has been removed. + +{% iframe /downloads/code/events/Remove_Event.html %} + {% include_code Konva Remove_Event Demo events/Remove_Event.html %} \ No newline at end of file diff --git a/source/docs/events/Remove_by_Name.md b/source/docs/events/Remove_by_Name.md index 37675959b..0400271e6 100644 --- a/source/docs/events/Remove_by_Name.md +++ b/source/docs/events/Remove_by_Name.md @@ -1,14 +1,14 @@ - -#HTML5 Canvas Remove Event Listener by Name with Konva - -To remove an event listener by name with Konva, -we can namespace the event type with the `on()` method so that we can later -remove the event listener by the same namespace with the `off()` method. - -Instructions: Click on the circle to see two alerts triggered from two different -onclick event bindings. Remove the event listeners using the buttons to -the left, and again click on the circle to observe the new onclick bindings. - -{% iframe /downloads/code/events/Remove_by_Name.html %} - + +#HTML5 Canvas Remove Event Listener by Name with Konva + +To remove an event listener by name with Konva, +we can namespace the event type with the `on()` method so that we can later +remove the event listener by the same namespace with the `off()` method. + +Instructions: Click on the circle to see two alerts triggered from two different +onclick event bindings. Remove the event listeners using the buttons to +the left, and again click on the circle to observe the new onclick bindings. + +{% iframe /downloads/code/events/Remove_by_Name.html %} + {% include_code Konva Remove By Name Demo events/Remove_by_Name.html %} \ No newline at end of file diff --git a/source/docs/filters/Blur.md b/source/docs/filters/Blur.md index 65882d37f..3dca3c9fe 100644 --- a/source/docs/filters/Blur.md +++ b/source/docs/filters/Blur.md @@ -1,16 +1,16 @@ -title: Blur Image Tutorial ---- - -To apply filter to an `Konva.Image`, we have to cache it first with `cache()` -function. Then apply filter with `filter()` function. - -To blur an image with Konva, we can use the `Konva.Filters.Blur` filter -and set the blur amount with the `blurRadius` property. - -Instructions: Slide the control to adjust the blur radius. - -For all available filters go to [Filters Documentation](http://konvajs.github.io/api/Konva.Filters.html). - -{% iframe /downloads/code/filters/Blur.html %} - +title: Blur Image Tutorial +--- + +To apply filter to an `Konva.Image`, we have to cache it first with `cache()` +function. Then apply filter with `filter()` function. + +To blur an image with Konva, we can use the `Konva.Filters.Blur` filter +and set the blur amount with the `blurRadius` property. + +Instructions: Slide the control to adjust the blur radius. + +For all available filters go to [Filters Documentation](http://konvajs.github.io/api/Konva.Filters.html). + +{% iframe /downloads/code/filters/Blur.html %} + {% include_code Konva Blur Image Demo filters/Blur.html %} \ No newline at end of file diff --git a/source/docs/filters/Brighten.md b/source/docs/filters/Brighten.md index 20ef9935c..24733f13e 100644 --- a/source/docs/filters/Brighten.md +++ b/source/docs/filters/Brighten.md @@ -1,18 +1,18 @@ -title: Brighten Image Tutorial ---- - -To apply filter to an `Konva.Image`, we have to cache it first with `cache()` -function. Then apply filter with `filter()` function. - -To brighten or darken an image with Konva, we can use the `Konva.Filters.Brighten` -filter and set the brightness amount with the `brightness` property. -The `brightness` property can be set to any integer between -1 and 1. -Negative values darken the image, and positive values brighten the image. - -Instructions: Slide the control to adjust the brightness - -For all available filters go to [Filters Documentation](http://konvajs.github.io/api/Konva.Filters.html). - -{% iframe /downloads/code/filters/Brighten.html %} - +title: Brighten Image Tutorial +--- + +To apply filter to an `Konva.Image`, we have to cache it first with `cache()` +function. Then apply filter with `filter()` function. + +To brighten or darken an image with Konva, we can use the `Konva.Filters.Brighten` +filter and set the brightness amount with the `brightness` property. +The `brightness` property can be set to any integer between -1 and 1. +Negative values darken the image, and positive values brighten the image. + +Instructions: Slide the control to adjust the brightness + +For all available filters go to [Filters Documentation](http://konvajs.github.io/api/Konva.Filters.html). + +{% iframe /downloads/code/filters/Brighten.html %} + {% include_code Konva Brighten Image Demo filters/Brighten.html %} \ No newline at end of file diff --git a/source/docs/filters/Grayscale.md b/source/docs/filters/Grayscale.md index f293f93d6..4b04643b0 100644 --- a/source/docs/filters/Grayscale.md +++ b/source/docs/filters/Grayscale.md @@ -1,13 +1,13 @@ -title: Grayscale Image Tutorial ---- - -To apply filter to an `Konva.Image`, we have to cache it first with `cache()` function. Then apply filter with `filter()` function. - -To invert the colors of an image with Konva, we can use the -`Konva.Filters.Grayscale` filter. - -For all available filters go to [Filters Documentation](http://konvajs.github.io/api/Konva.Filters.html). - -{% iframe /downloads/code/filters/Grayscale.html %} - +title: Grayscale Image Tutorial +--- + +To apply filter to an `Konva.Image`, we have to cache it first with `cache()` function. Then apply filter with `filter()` function. + +To invert the colors of an image with Konva, we can use the +`Konva.Filters.Grayscale` filter. + +For all available filters go to [Filters Documentation](http://konvajs.github.io/api/Konva.Filters.html). + +{% iframe /downloads/code/filters/Grayscale.html %} + {% include_code Konva Grayscale Image Demo filters/Grayscale.html %} \ No newline at end of file diff --git a/source/docs/filters/Invert.md b/source/docs/filters/Invert.md index 54726fa5f..bce16075a 100644 --- a/source/docs/filters/Invert.md +++ b/source/docs/filters/Invert.md @@ -1,13 +1,13 @@ -title: Invert Image Tutorial ---- - -To apply filter to an `Konva.Image`, we have to cache it first with `cache()` function. Then apply filter with `filter()` function. - -To invert the colors of an image with Konva, we can use the -`Konva.Filters.Invert` filter. - -For all available filters go to [Filters Documentation](http://konvajs.github.io/api/Konva.Filters.html). - -{% iframe /downloads/code/filters/Invert.html %} - +title: Invert Image Tutorial +--- + +To apply filter to an `Konva.Image`, we have to cache it first with `cache()` function. Then apply filter with `filter()` function. + +To invert the colors of an image with Konva, we can use the +`Konva.Filters.Invert` filter. + +For all available filters go to [Filters Documentation](http://konvajs.github.io/api/Konva.Filters.html). + +{% iframe /downloads/code/filters/Invert.html %} + {% include_code Konva Invert Image Demo filters/Invert.html %} \ No newline at end of file diff --git a/source/docs/filters/Kaleidoscope.md b/source/docs/filters/Kaleidoscope.md index 542e0fbcd..9545c6c78 100644 --- a/source/docs/filters/Kaleidoscope.md +++ b/source/docs/filters/Kaleidoscope.md @@ -1,16 +1,16 @@ -title: Kaleidoscope Image Tutorial ---- - -To apply filter to an `Konva.Image`, we have to cache it first with `cache()` -function. Then apply filter with `filter()` function. - -To create a kaleidoscope with Konva, we can use the `Konva.Filters.Kaleidoscope` -filter and set the `kaleidoscopePower` and `kaleidoscopeAngle` properties. - -Instructions: Slide the control to adjust the kaleidoscope angle. - -For all available filters go to [Filters Documentation](http://konvajs.github.io/api/Konva.Filters.html). - -{% iframe /downloads/code/filters/Kaleidoscope.html %} - +title: Kaleidoscope Image Tutorial +--- + +To apply filter to an `Konva.Image`, we have to cache it first with `cache()` +function. Then apply filter with `filter()` function. + +To create a kaleidoscope with Konva, we can use the `Konva.Filters.Kaleidoscope` +filter and set the `kaleidoscopePower` and `kaleidoscopeAngle` properties. + +Instructions: Slide the control to adjust the kaleidoscope angle. + +For all available filters go to [Filters Documentation](http://konvajs.github.io/api/Konva.Filters.html). + +{% iframe /downloads/code/filters/Kaleidoscope.html %} + {% include_code Konva Kaleidoscope Image Demo filters/Kaleidoscope.html %} \ No newline at end of file diff --git a/source/docs/filters/Multiple_Filters.md b/source/docs/filters/Multiple_Filters.md index 23379a4c1..626fd3248 100644 --- a/source/docs/filters/Multiple_Filters.md +++ b/source/docs/filters/Multiple_Filters.md @@ -1,11 +1,11 @@ -title: Multiple Filters Tutorial ---- - -To apply multiple filters to an `Konva.Image`, we have to cache it first with `cache()` -function. Then apply filters with `filter()` function. - -For all available filters go to [Filters Documentation](http://konvajs.github.io/api/Konva.Filters.html). - -{% iframe /downloads/code/filters/Multiple_Filters.html %} - +title: Multiple Filters Tutorial +--- + +To apply multiple filters to an `Konva.Image`, we have to cache it first with `cache()` +function. Then apply filters with `filter()` function. + +For all available filters go to [Filters Documentation](http://konvajs.github.io/api/Konva.Filters.html). + +{% iframe /downloads/code/filters/Multiple_Filters.html %} + {% include_code Konva Multiple Filters Image Demo filters/Multiple_Filters.html %} \ No newline at end of file diff --git a/source/docs/groups_and_layers/Change_Containers.md b/source/docs/groups_and_layers/Change_Containers.md index 5c29038af..afbeea0fc 100644 --- a/source/docs/groups_and_layers/Change_Containers.md +++ b/source/docs/groups_and_layers/Change_Containers.md @@ -1,15 +1,15 @@ -title: Move Shape to Another Container ---- - -To move a shape from one container into another with Konva, we can use the -`moveTo()` method which requires a container as a parameter. -A container can be another stage, a layer, or a group. You can also move groups -into other groups and layers, or shapes from groups directly into other layers. - -Instructions: Drag and drop the groups and observe that the red rectangle is -bound to either the yellow group or the blue group. -Use the buttons on the left to move the box from one group into another. - -{% iframe /downloads/code/groups_and_layers/Change_Containers.html %} - +title: Move Shape to Another Container +--- + +To move a shape from one container into another with Konva, we can use the +`moveTo()` method which requires a container as a parameter. +A container can be another stage, a layer, or a group. You can also move groups +into other groups and layers, or shapes from groups directly into other layers. + +Instructions: Drag and drop the groups and observe that the red rectangle is +bound to either the yellow group or the blue group. +Use the buttons on the left to move the box from one group into another. + +{% iframe /downloads/code/groups_and_layers/Change_Containers.html %} + {% include_code Konva Move Shape to Another Container Demo groups_and_layers/Change_Containers.html %} \ No newline at end of file diff --git a/source/docs/groups_and_layers/Clipping_Regions.md b/source/docs/groups_and_layers/Clipping_Regions.md index f74bc573c..cabec3855 100644 --- a/source/docs/groups_and_layers/Clipping_Regions.md +++ b/source/docs/groups_and_layers/Clipping_Regions.md @@ -1,11 +1,11 @@ -title: Clipping Functions ---- - -To draw things inside of clipping regions with Konva, we can set the `clip` -property of any container, including a group, a layer, or the stage. -Clipping regions are defined by an x, y, width, and height. In this tutorial, -we'll draw blobs inside of a rectangular clipping region applied to a group. - -{% iframe /downloads/code/groups_and_layers/Clipping_Regions.html %} - +title: Clipping Functions +--- + +To draw things inside of clipping regions with Konva, we can set the `clip` +property of any container, including a group, a layer, or the stage. +Clipping regions are defined by an x, y, width, and height. In this tutorial, +we'll draw blobs inside of a rectangular clipping region applied to a group. + +{% iframe /downloads/code/groups_and_layers/Clipping_Regions.html %} + {% include_code Konva Clipping Functions Demo groups_and_layers/Clipping_Regions.html %} \ No newline at end of file diff --git a/source/docs/groups_and_layers/Groups.md b/source/docs/groups_and_layers/Groups.md index b641b648d..fe74bb55c 100644 --- a/source/docs/groups_and_layers/Groups.md +++ b/source/docs/groups_and_layers/Groups.md @@ -1,13 +1,13 @@ -title: Shape Groups ---- - -To group multiple shapes together with Konva, we can instantiate -a `Konva.Group()` object and then add shapes to it with the `add()` method. -Grouping shapes together is really handy when we want to transform multiple -shapes together, e.g. if we want to move, rotate, or scale multiple shapes -at once. Groups can also be added to other groups to create more complex -Node trees. For a full list of attributes and methods, check out the [Konva.Group documentation](http://konvajs.github.io/api/Konva.Group.html). - -{% iframe /downloads/code/groups_and_layers/Groups.html %} - +title: Shape Groups +--- + +To group multiple shapes together with Konva, we can instantiate +a `Konva.Group()` object and then add shapes to it with the `add()` method. +Grouping shapes together is really handy when we want to transform multiple +shapes together, e.g. if we want to move, rotate, or scale multiple shapes +at once. Groups can also be added to other groups to create more complex +Node trees. For a full list of attributes and methods, check out the [Konva.Group documentation](http://konvajs.github.io/api/Konva.Group.html). + +{% iframe /downloads/code/groups_and_layers/Groups.html %} + {% include_code Konva Groups Demo groups_and_layers/Groups.html %} \ No newline at end of file diff --git a/source/docs/groups_and_layers/Layering.md b/source/docs/groups_and_layers/Layering.md index f261c3990..a79a686b2 100644 --- a/source/docs/groups_and_layers/Layering.md +++ b/source/docs/groups_and_layers/Layering.md @@ -1,13 +1,13 @@ -title: Shape Layering ---- - -To layer shapes with Konva, we can use one of the following layering methods: -`moveToTop()`, `moveToBottom()`, `moveUp()`, `moveDown()`, or `zIndex()`. -You can also layer groups and layers. - -Instructions: Drag and drop the boxes to move them around, and then use the -buttons on the left to reorder the yellow box. - -{% iframe /downloads/code/groups_and_layers/Layering.html %} - +title: Shape Layering +--- + +To layer shapes with Konva, we can use one of the following layering methods: +`moveToTop()`, `moveToBottom()`, `moveUp()`, `moveDown()`, or `zIndex()`. +You can also layer groups and layers. + +Instructions: Drag and drop the boxes to move them around, and then use the +buttons on the left to reorder the yellow box. + +{% iframe /downloads/code/groups_and_layers/Layering.html %} + {% include_code Konva Shape Layering Demo groups_and_layers/Layering.html %} \ No newline at end of file diff --git a/source/docs/how_it_works.md b/source/docs/how_it_works.md index aed8848a2..34480521a 100644 --- a/source/docs/how_it_works.md +++ b/source/docs/how_it_works.md @@ -1,39 +1,39 @@ -title: How It Works ---- - -Konva stages are made up of user defined layers. -Each layer has two canvas renderers, a scene renderer and a hit graph renderer. -The scene renderer is what you can see, and the hit graph renderer is a special hidden -canvas that's used for high performance event detection. - -Each layer can contain shapes, groups of shapes, or groups of other groups. -The stage, layers, groups, and shapes are virtual nodes, similar to DOM nodes in an HTML page. -Here's an example Node hierarchy: - -``` - Stage - | - +------+------+ - | | - Layer Layer - | | - +-----+-----+ Shape - | | - Group Group - | | - + +---+---+ - | | | - Shape Group Shape - | - + - | - Shape -``` - -All nodes can be styled and transformed. Although Konva has prebuilt shapes available, -such as rectangles, circles, images, sprites, text, lines, polygons, regular polygons, paths, stars, etc., -you can also create custom shapes by instantiating the Shape class and creating a draw function. - -Once you have a stage set up with layers and shapes, -you can bind event listeners, transform nodes, run animations, +title: How It Works +--- + +Konva stages are made up of user defined layers. +Each layer has two canvas renderers, a scene renderer and a hit graph renderer. +The scene renderer is what you can see, and the hit graph renderer is a special hidden +canvas that's used for high performance event detection. + +Each layer can contain shapes, groups of shapes, or groups of other groups. +The stage, layers, groups, and shapes are virtual nodes, similar to DOM nodes in an HTML page. +Here's an example Node hierarchy: + +``` + Stage + | + +------+------+ + | | + Layer Layer + | | + +-----+-----+ Shape + | | + Group Group + | | + + +---+---+ + | | | + Shape Group Shape + | + + + | + Shape +``` + +All nodes can be styled and transformed. Although Konva has prebuilt shapes available, +such as rectangles, circles, images, sprites, text, lines, polygons, regular polygons, paths, stars, etc., +you can also create custom shapes by instantiating the Shape class and creating a draw function. + +Once you have a stage set up with layers and shapes, +you can bind event listeners, transform nodes, run animations, apply filters, and much more. \ No newline at end of file diff --git a/source/docs/index.md b/source/docs/index.md index 3f83b3746..93d47a6dd 100644 --- a/source/docs/index.md +++ b/source/docs/index.md @@ -1,32 +1,32 @@ -title: Documentation ---- -Welcome to the Konva's documentation. This documentation will help you get started fast. -If you get any problems when using Konva you can ask me on [GitHub](https://github.com/konvajs/konva/issues). - -## What's Konva? - -Konva is an HTML5 Canvas JavaScript framework that extends the 2d context -by enabling canvas interactivity for desktop and mobile applications. - -Konva enables high performance animations, transitions, node nesting, layering, filtering, -caching, event handling for desktop and mobile applications, and much more. - -You can draw things onto the stage, add event listeners to them, move them, -scale them, and rotate them independently from other shapes to support high performance -animations, even if your application uses thousands of shapes. - -This project began as a GitHub fork of [KineticJS](https://github.com/ericdrowell/KineticJS). - -## Install Konva - -If you are using package managers: -``` bash -$ npm install konva -$ # or -$ bower install konva -``` - -Or download from CDN: - -* [Full version konva.js](https://cdn.rawgit.com/konvajs/konva/0.9.0/konva.js) -* [Min version konva.min.js](https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js) +title: Documentation +--- +Welcome to the Konva's documentation. This documentation will help you get started fast. +If you get any problems when using Konva you can ask me on [GitHub](https://github.com/konvajs/konva/issues). + +## What's Konva? + +Konva is an HTML5 Canvas JavaScript framework that extends the 2d context +by enabling canvas interactivity for desktop and mobile applications. + +Konva enables high performance animations, transitions, node nesting, layering, filtering, +caching, event handling for desktop and mobile applications, and much more. + +You can draw things onto the stage, add event listeners to them, move them, +scale them, and rotate them independently from other shapes to support high performance +animations, even if your application uses thousands of shapes. + +This project began as a GitHub fork of [KineticJS](https://github.com/ericdrowell/KineticJS). + +## Install Konva + +If you are using package managers: +``` bash +$ npm install konva +$ # or +$ bower install konva +``` + +Or download from CDN: + +* [Full version konva.js](https://cdn.rawgit.com/konvajs/konva/0.9.0/konva.js) +* [Min version konva.min.js](https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js) diff --git a/source/docs/performance/All_Performance_Tips.md b/source/docs/performance/All_Performance_Tips.md index 94cc15295..2f88d1f95 100644 --- a/source/docs/performance/All_Performance_Tips.md +++ b/source/docs/performance/All_Performance_Tips.md @@ -1,19 +1,19 @@ -title: All KonvaJS performance tips list ---- - -1. [`batchDraw` method](http://konvajs.github.io/docs/performance/Batch_Draw.html) -2. [Layer Management](http://konvajs.github.io/docs/performance/Layer_Management.html) -3. [Shape Caching](http://konvajs.github.io/docs/performance/Shape_Caching.html) -4. [Optimize Animation](http://konvajs.github.io/docs/performance/Optimize_Animation.html) -5. [Shape Redraw](http://konvajs.github.io/docs/performance/Shape_Redraw.html) -6. If your shape has only position transformation (`x` and `y`, no `scale`, `rotation`) set `transformsEnabled = 'position'` -7. If you don't need event on layer set `layer.hitGraphEnabled(false)`. Or use [Konva.FastLayer](http://konvajs.github.io/api/Konva.Group.html). See [Demo](http://konvajs.github.io/docs/sandbox/Animation_Stress_Test.html) -8. For mobile application set viewport: `` -9. If you have bad performance on retina devices set `Konva.pixelRatio = 1`. Make sure that quality of result is ok for you. -10. While dragging a node you can move it on separate layer. Then move it back to original layer. -11. [Optimize Stroke Drawing](http://konvajs.github.io/docs/performance/Optimize_Strokes.html) -12. If a shape has fill, stroke and opacity you may set `shape.perfectDrawEnabled(false)`. See demo for more information [Disable Perfect Drawing](http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html). -13. Try set `shape.listening(false)` where possible. For more info read [Listening false](http://konvajs.github.io/docs/performance/Listening_False.html). -14. [Avoid Memory Leaks](http://konvajs.github.io/docs/performance/Avoid_Memory_Leaks.html). - - +title: All KonvaJS performance tips list +--- + +1. [`batchDraw` method](http://konvajs.github.io/docs/performance/Batch_Draw.html) +2. [Layer Management](http://konvajs.github.io/docs/performance/Layer_Management.html) +3. [Shape Caching](http://konvajs.github.io/docs/performance/Shape_Caching.html) +4. [Optimize Animation](http://konvajs.github.io/docs/performance/Optimize_Animation.html) +5. [Shape Redraw](http://konvajs.github.io/docs/performance/Shape_Redraw.html) +6. If your shape has only position transformation (`x` and `y`, no `scale`, `rotation`) set `transformsEnabled = 'position'` +7. If you don't need event on layer set `layer.hitGraphEnabled(false)`. Or use [Konva.FastLayer](http://konvajs.github.io/api/Konva.Group.html). See [Demo](http://konvajs.github.io/docs/sandbox/Animation_Stress_Test.html) +8. For mobile application set viewport: `` +9. If you have bad performance on retina devices set `Konva.pixelRatio = 1`. Make sure that quality of result is ok for you. +10. While dragging a node you can move it on separate layer. Then move it back to original layer. +11. [Optimize Stroke Drawing](http://konvajs.github.io/docs/performance/Optimize_Strokes.html) +12. If a shape has fill, stroke and opacity you may set `shape.perfectDrawEnabled(false)`. See demo for more information [Disable Perfect Drawing](http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html). +13. Try set `shape.listening(false)` where possible. For more info read [Listening false](http://konvajs.github.io/docs/performance/Listening_False.html). +14. [Avoid Memory Leaks](http://konvajs.github.io/docs/performance/Avoid_Memory_Leaks.html). + + diff --git a/source/docs/performance/Avoid_Memory_Leaks.md b/source/docs/performance/Avoid_Memory_Leaks.md index 6e14569b6..bc4485a2f 100644 --- a/source/docs/performance/Avoid_Memory_Leaks.md +++ b/source/docs/performance/Avoid_Memory_Leaks.md @@ -1,34 +1,34 @@ -title: How to avoid Memory leaks Tip ---- - -### Deleting shape - -There are two very close methods `remove()` and `destroy()`. If you need to completely delete node you need to use `destroy()` method. -If you are going to reuse node you should `remove()` it then later you may add it again to any container. -Don't reuse node after `destroy()`. As `destroy()` delete all references to node from KonvaJS engine. - -### Tweening - -When you are using `Konva.Tween` instance you have to destroy it after usage. - -```javascript -var tween = new Konva.Tween({ - node : circle, - x : 0, - duration : 0.5, - onFinish : function() { - // remove all references from Konva - tween.destroy(); - } -}); -tween.play(); -``` - -Or if you don't need to reuse tween you may use new `to()` method: -```javascript -// tween will be automatically started and destroyed on finish -circle.to({ - x : 0, - duration : 0.5 -}); -``` +title: How to avoid Memory leaks Tip +--- + +### Deleting shape + +There are two very close methods `remove()` and `destroy()`. If you need to completely delete node you need to use `destroy()` method. +If you are going to reuse node you should `remove()` it then later you may add it again to any container. +Don't reuse node after `destroy()`. As `destroy()` delete all references to node from KonvaJS engine. + +### Tweening + +When you are using `Konva.Tween` instance you have to destroy it after usage. + +```javascript +var tween = new Konva.Tween({ + node : circle, + x : 0, + duration : 0.5, + onFinish : function() { + // remove all references from Konva + tween.destroy(); + } +}); +tween.play(); +``` + +Or if you don't need to reuse tween you may use new `to()` method: +```javascript +// tween will be automatically started and destroyed on finish +circle.to({ + x : 0, + duration : 0.5 +}); +``` diff --git a/source/docs/performance/Batch_Draw.md b/source/docs/performance/Batch_Draw.md index 50a6aa447..b7588f7f2 100644 --- a/source/docs/performance/Batch_Draw.md +++ b/source/docs/performance/Batch_Draw.md @@ -1,21 +1,21 @@ -title: Batch Draw Tip ---- - -In some situations, we may want to update a Konva shape as fast as possible, -but without causing too many redraws. For example, if we want to update an -element on the stage via mousemove, we don't want to redraw the layer with the -`draw()` method, because the mousemove event could be fired hundreds of times per -second, which would result in a forced frame rate of over a hundred frames per second. -Often times this can cause jumpy animations because browsers simply can't handle excessive redraws. - -For situations like this, it's much better to use the `batchDraw()` method -which automatically hooks redraws into the Konva animation engine. -No matter how many times you call `batchDraw()`, Konva will automatically -limit the number of redraws per second based on the maximum number of frames -per second that the browser can handle at any given point in time. - -Instructions: Move your mouse over the stage to spin the rectangle - -{% iframe /downloads/code/performance/BatchDraw.html %} - -{% include_code Konva Batch Draw Demo performance/BatchDraw.html %} +title: Batch Draw Tip +--- + +In some situations, we may want to update a Konva shape as fast as possible, +but without causing too many redraws. For example, if we want to update an +element on the stage via mousemove, we don't want to redraw the layer with the +`draw()` method, because the mousemove event could be fired hundreds of times per +second, which would result in a forced frame rate of over a hundred frames per second. +Often times this can cause jumpy animations because browsers simply can't handle excessive redraws. + +For situations like this, it's much better to use the `batchDraw()` method +which automatically hooks redraws into the Konva animation engine. +No matter how many times you call `batchDraw()`, Konva will automatically +limit the number of redraws per second based on the maximum number of frames +per second that the browser can handle at any given point in time. + +Instructions: Move your mouse over the stage to spin the rectangle + +{% iframe /downloads/code/performance/BatchDraw.html %} + +{% include_code Konva Batch Draw Demo performance/BatchDraw.html %} diff --git a/source/docs/performance/Disable_Perfect_Draw.md b/source/docs/performance/Disable_Perfect_Draw.md index 8e23b7745..39b07e463 100644 --- a/source/docs/performance/Disable_Perfect_Draw.md +++ b/source/docs/performance/Disable_Perfect_Draw.md @@ -1,27 +1,27 @@ -title: Disable Perfect Drawing Tip ---- - -In some case drawing on canvas has unexpected result. -For example let's draw shape with fill, stroke and opacity. -As stroke are drawn on top of fill. There's a line of half the size of the stroke inside the shape which is darker -because it's the intersection of the fill and the stroke. - -Probably that is not expected for you. So KonvaJS fix such behaviour with using buffer canvas. - -In this case KonvaJS doing this: -1. Draw shape on buffer canvas -2. Fill and stroke it WITHOUT opacity -3. Apply opacity on layer's canvas -4. Then draw on layer canvas result from buffer - -But using buffer canvas might drop performace. So you can disable such fixing: - -```javascript -shape.perfectDrawEnabled(false); -``` - -See differens here: - -{% iframe /downloads/code/performance/Disable_Perfect_Draw.html %} - -{% include_code Konva Disable Perfect Drawing Demo performance/Disable_Perfect_Draw.html %} +title: Disable Perfect Drawing Tip +--- + +In some case drawing on canvas has unexpected result. +For example let's draw shape with fill, stroke and opacity. +As stroke are drawn on top of fill. There's a line of half the size of the stroke inside the shape which is darker +because it's the intersection of the fill and the stroke. + +Probably that is not expected for you. So KonvaJS fix such behaviour with using buffer canvas. + +In this case KonvaJS doing this: +1. Draw shape on buffer canvas +2. Fill and stroke it WITHOUT opacity +3. Apply opacity on layer's canvas +4. Then draw on layer canvas result from buffer + +But using buffer canvas might drop performace. So you can disable such fixing: + +```javascript +shape.perfectDrawEnabled(false); +``` + +See differens here: + +{% iframe /downloads/code/performance/Disable_Perfect_Draw.html %} + +{% include_code Konva Disable Perfect Drawing Demo performance/Disable_Perfect_Draw.html %} diff --git a/source/docs/performance/Layer_Management.md b/source/docs/performance/Layer_Management.md index 3f904d3b3..d71185713 100644 --- a/source/docs/performance/Layer_Management.md +++ b/source/docs/performance/Layer_Management.md @@ -1,17 +1,17 @@ -title: Layer Management Tip ---- - -When creating Konva applications, the most important thing to consider, -in regards to performance, is layer management. One of the things that makes -Konva stand out from other canvas libraries is that it enables us to create -individual layers, each with their own canvas elements. This means that we can -animate, transition, or update some stage elements, while not redrawing others. -If we inspect the DOM of a Konva stage, we'll see that there is actually one -canvas element per layer. - -This tutorial has two layers, one layer that's animated, and another static layer -that contains text. Since there's no reason to continually redraw the text, it's placed in its own layer. - -{% iframe /downloads/code/performance/Layer_Management.html %} - -{% include_code Konva Layer Management Demo performance/Layer_Management.html %} +title: Layer Management Tip +--- + +When creating Konva applications, the most important thing to consider, +in regards to performance, is layer management. One of the things that makes +Konva stand out from other canvas libraries is that it enables us to create +individual layers, each with their own canvas elements. This means that we can +animate, transition, or update some stage elements, while not redrawing others. +If we inspect the DOM of a Konva stage, we'll see that there is actually one +canvas element per layer. + +This tutorial has two layers, one layer that's animated, and another static layer +that contains text. Since there's no reason to continually redraw the text, it's placed in its own layer. + +{% iframe /downloads/code/performance/Layer_Management.html %} + +{% include_code Konva Layer Management Demo performance/Layer_Management.html %} diff --git a/source/docs/performance/Listening_False.md b/source/docs/performance/Listening_False.md index bf9f3ed19..305f7d331 100644 --- a/source/docs/performance/Listening_False.md +++ b/source/docs/performance/Listening_False.md @@ -1,12 +1,12 @@ -title: Disable Listening Shapes Tip ---- - -You can set `listening(false)` to shape to remove it from hit graph. It will increase performance. -In some cases it may be very useful and will not touch whole logic of your application. - -For example we have a button (group) with rectangle and text. We need to listen click on button. -It this case we can remove text from hit graph and listen click only from rectangle. - -{% iframe /downloads/code/performance/Listening_False.html %} - -{% include_code Konva Disable Listening Shapes Demo performance/Listening_False.html %} +title: Disable Listening Shapes Tip +--- + +You can set `listening(false)` to shape to remove it from hit graph. It will increase performance. +In some cases it may be very useful and will not touch whole logic of your application. + +For example we have a button (group) with rectangle and text. We need to listen click on button. +It this case we can remove text from hit graph and listen click only from rectangle. + +{% iframe /downloads/code/performance/Listening_False.html %} + +{% include_code Konva Disable Listening Shapes Demo performance/Listening_False.html %} diff --git a/source/docs/performance/Optimize_Animation.md b/source/docs/performance/Optimize_Animation.md index 0a00a10f4..a65ce7a34 100644 --- a/source/docs/performance/Optimize_Animation.md +++ b/source/docs/performance/Optimize_Animation.md @@ -1,10 +1,10 @@ -title: Optimize Animation Tip ---- - -If you animation have frames without any updates (no nodes are changed) you may `return false` from animation function. - -In this case Konva wouldn't update layers. - -{% iframe /downloads/code/performance/Optimize_Animation.html %} - -{% include_code Konva Optimize Animation Demo performance/Optimize_Animation.html %} +title: Optimize Animation Tip +--- + +If you animation have frames without any updates (no nodes are changed) you may `return false` from animation function. + +In this case Konva wouldn't update layers. + +{% iframe /downloads/code/performance/Optimize_Animation.html %} + +{% include_code Konva Optimize Animation Demo performance/Optimize_Animation.html %} diff --git a/source/docs/performance/Optimize_Strokes.md b/source/docs/performance/Optimize_Strokes.md index ba09e2163..96bc3e510 100644 --- a/source/docs/performance/Optimize_Strokes.md +++ b/source/docs/performance/Optimize_Strokes.md @@ -1,17 +1,17 @@ -title: Optimizing Strokes Tip ---- - -### Remove stroke from hit - -If you have a shape with fill and very small stroke you can set `shape.strokeHitEnabled(false)` to remove stroke from hit graph. -Don't use this property if your stroke is critical for hit detection. - -### Disable shadow for stroke - -If you don't really need shadow for stroke you can set `shape.shadowForStrokeEnabled(false)`. -Remember that shadow will be disable if you are using `Konva.Line` without fill. - - -{% iframe /downloads/code/performance/Optimize_Strokes.html %} - -{% include_code Konva Optimizing Strokes Demo performance/Optimize_Strokes.html %} +title: Optimizing Strokes Tip +--- + +### Remove stroke from hit + +If you have a shape with fill and very small stroke you can set `shape.strokeHitEnabled(false)` to remove stroke from hit graph. +Don't use this property if your stroke is critical for hit detection. + +### Disable shadow for stroke + +If you don't really need shadow for stroke you can set `shape.shadowForStrokeEnabled(false)`. +Remember that shadow will be disable if you are using `Konva.Line` without fill. + + +{% iframe /downloads/code/performance/Optimize_Strokes.html %} + +{% include_code Konva Optimizing Strokes Demo performance/Optimize_Strokes.html %} diff --git a/source/docs/performance/Shape_Caching.md b/source/docs/performance/Shape_Caching.md index 6ae652170..5a11c439c 100644 --- a/source/docs/performance/Shape_Caching.md +++ b/source/docs/performance/Shape_Caching.md @@ -1,19 +1,19 @@ -title: Shape Caching Tip ---- - -One way to drastically improve drawing performance for complex Konva shapes is to cache them as images. -This can be achieved by using the `cache()` method to convert a node into an image object. - -This particular tutorial of drawing 10 cached stars rather than drawing 10 individual -stars sees about a 4x drawing performance boost. Caching can be applied to any node, -including the stage, layers, groups, and shapes. - -Note: The `cache()` method requires that the image is hosted on a web server with the same domain as the code executing it. - -In same cases `cache()` function can not automatically detect size of node. -So you should be carefull for groups and shapes with shadows and strokes. -If you see unexpected result pass bound properties to `cache()` function with `x`, `y`, `width` and `height` properties. - -{% iframe /downloads/code/performance/Shape_Caching.html %} - -{% include_code Konva Shape Caching Demo performance/Shape_Caching.html %} +title: Shape Caching Tip +--- + +One way to drastically improve drawing performance for complex Konva shapes is to cache them as images. +This can be achieved by using the `cache()` method to convert a node into an image object. + +This particular tutorial of drawing 10 cached stars rather than drawing 10 individual +stars sees about a 4x drawing performance boost. Caching can be applied to any node, +including the stage, layers, groups, and shapes. + +Note: The `cache()` method requires that the image is hosted on a web server with the same domain as the code executing it. + +In same cases `cache()` function can not automatically detect size of node. +So you should be carefull for groups and shapes with shadows and strokes. +If you see unexpected result pass bound properties to `cache()` function with `x`, `y`, `width` and `height` properties. + +{% iframe /downloads/code/performance/Shape_Caching.html %} + +{% include_code Konva Shape Caching Demo performance/Shape_Caching.html %} diff --git a/source/docs/performance/Shape_Redraw.md b/source/docs/performance/Shape_Redraw.md index 22fce8db6..bdc77b037 100644 --- a/source/docs/performance/Shape_Redraw.md +++ b/source/docs/performance/Shape_Redraw.md @@ -1,14 +1,14 @@ -title: Shape Redraw Tip ---- - -Usually when you need to update your canvas you should call `layer.draw()`. - -But in small set of cases it is possible to update `Konva.Node` without updating whole layer. -You can call `shape.draw()`, *BUT remember that in this case shape will be drawn OVER existing canvas*. -So it is not possible to use this tip if your node should be placed under other nodes or if it has an opacity. - -Instructions: mouseover boxes to hightlight. - -{% iframe /downloads/code/performance/Shape_Redraw.html %} - -{% include_code Konva Shape Redraw Demo performance/Shape_Redraw.html %} +title: Shape Redraw Tip +--- + +Usually when you need to update your canvas you should call `layer.draw()`. + +But in small set of cases it is possible to update `Konva.Node` without updating whole layer. +You can call `shape.draw()`, *BUT remember that in this case shape will be drawn OVER existing canvas*. +So it is not possible to use this tip if your node should be placed under other nodes or if it has an opacity. + +Instructions: mouseover boxes to hightlight. + +{% iframe /downloads/code/performance/Shape_Redraw.html %} + +{% include_code Konva Shape Redraw Demo performance/Shape_Redraw.html %} diff --git a/source/docs/sandbox/10000_Shapes_with_Tooltip.md b/source/docs/sandbox/10000_Shapes_with_Tooltip.md index 8705123ec..d597c9366 100644 --- a/source/docs/sandbox/10000_Shapes_with_Tooltip.md +++ b/source/docs/sandbox/10000_Shapes_with_Tooltip.md @@ -1,6 +1,6 @@ -title: 10,000 Shapes with Tooltips Stress Test with Konva ---- - -{% iframe /downloads/code/sandbox/10000_Shapes_With_Tooltip.html %} - +title: 10,000 Shapes with Tooltips Stress Test with Konva +--- + +{% iframe /downloads/code/sandbox/10000_Shapes_With_Tooltip.html %} + {% include_code Konva 10,000 Shapes with Tooltips Demo sandbox/10000_Shapes_With_Tooltip.html %} \ No newline at end of file diff --git a/source/docs/sandbox/20000_Nodes.md b/source/docs/sandbox/20000_Nodes.md index 7693a1e52..3f8f127f3 100644 --- a/source/docs/sandbox/20000_Nodes.md +++ b/source/docs/sandbox/20000_Nodes.md @@ -1,10 +1,10 @@ -title: Interactive Scatter Plot with 20,000 Nodes ---- - -The purpose of this lab is to demonstrate she shear number of nodes that Konva can handle by rendering 20,000 circles which are sensitive to mouseover events and can be drag and dropped. This lab is also a great demonstration of event delegation, in which a single event handler attached to the stage handles the circle events. - -Instructions: Mouse over the nodes to see more information and then drag and drop them around the stage. - -{% iframe /downloads/code/sandbox/20000_Nodes.html %} - +title: Interactive Scatter Plot with 20,000 Nodes +--- + +The purpose of this lab is to demonstrate she shear number of nodes that Konva can handle by rendering 20,000 circles which are sensitive to mouseover events and can be drag and dropped. This lab is also a great demonstration of event delegation, in which a single event handler attached to the stage handles the circle events. + +Instructions: Mouse over the nodes to see more information and then drag and drop them around the stage. + +{% iframe /downloads/code/sandbox/20000_Nodes.html %} + {% include_code Konva 20000 Nodes Demo sandbox/20000_Nodes.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Animals_on_the_Beach_Game.md b/source/docs/sandbox/Animals_on_the_Beach_Game.md index 1bedce039..88c30408c 100644 --- a/source/docs/sandbox/Animals_on_the_Beach_Game.md +++ b/source/docs/sandbox/Animals_on_the_Beach_Game.md @@ -1,6 +1,6 @@ -title: Animals on the Beach Game ---- - -{% iframe /downloads/code/sandbox/Animals_on_the_Beach_Game.html 578 530 %} - +title: Animals on the Beach Game +--- + +{% iframe /downloads/code/sandbox/Animals_on_the_Beach_Game.html 578 530 %} + {% include_code Konva Animals on the Beach Game Demo sandbox/Animals_on_the_Beach_Game.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Animation_Stress_Test.md b/source/docs/sandbox/Animation_Stress_Test.md index 2d055d607..33cc80105 100644 --- a/source/docs/sandbox/Animation_Stress_Test.md +++ b/source/docs/sandbox/Animation_Stress_Test.md @@ -1,6 +1,6 @@ -title: Animation Stress Test ---- - -{% iframe /downloads/code/sandbox/Animation_Stress_Test.html %} - +title: Animation Stress Test +--- + +{% iframe /downloads/code/sandbox/Animation_Stress_Test.html %} + {% include_code Konva Animation Stress Test Demo sandbox/Animation_Stress_Test.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Drag_and_Drop_Multiple_Shapes.md b/source/docs/sandbox/Drag_and_Drop_Multiple_Shapes.md index e2643df0d..f23f55793 100644 --- a/source/docs/sandbox/Drag_and_Drop_Multiple_Shapes.md +++ b/source/docs/sandbox/Drag_and_Drop_Multiple_Shapes.md @@ -1,8 +1,8 @@ -title: Drag and Drop Multiple Shapes ---- - -Instructions: Drag and drop the shapes or remove them by double clicking or double tapping. - -{% iframe /downloads/code/sandbox/Drag_And_Drop_Multiple_Shapes.html %} - +title: Drag and Drop Multiple Shapes +--- + +Instructions: Drag and drop the shapes or remove them by double clicking or double tapping. + +{% iframe /downloads/code/sandbox/Drag_And_Drop_Multiple_Shapes.html %} + {% include_code Konva Drag and Drop Multiple Shapes Demo sandbox/Drag_And_Drop_Multiple_Shapes.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Drag_and_Drop_Stress_Test.md b/source/docs/sandbox/Drag_and_Drop_Stress_Test.md index 1fe2c69d1..e16fc6070 100644 --- a/source/docs/sandbox/Drag_and_Drop_Stress_Test.md +++ b/source/docs/sandbox/Drag_and_Drop_Stress_Test.md @@ -1,6 +1,6 @@ -title: Drag and Drop Stress Test with 10,000 Shapes ---- - -{% iframe /downloads/code/sandbox/Drag_And_Drop_Stress_Test.html %} - +title: Drag and Drop Stress Test with 10,000 Shapes +--- + +{% iframe /downloads/code/sandbox/Drag_And_Drop_Stress_Test.html %} + {% include_code Konva Drag and Drop Stress Test with 10,000 Shapes Demo sandbox/Drag_And_Drop_Stress_Test.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Elastic_Stars.md b/source/docs/sandbox/Elastic_Stars.md index f46d461fe..55fea273b 100644 --- a/source/docs/sandbox/Elastic_Stars.md +++ b/source/docs/sandbox/Elastic_Stars.md @@ -1,8 +1,8 @@ -title: Elastic Stars ---- - -Instructions: Drag and drop the stars and observe the elastic drop on dragend. Refresh the page to randomize the stars again. - -{% iframe /downloads/code/sandbox/Elastic_Stars.html %} - +title: Elastic Stars +--- + +Instructions: Drag and drop the stars and observe the elastic drop on dragend. Refresh the page to randomize the stars again. + +{% iframe /downloads/code/sandbox/Elastic_Stars.html %} + {% include_code Konva Elastic Stars Demo sandbox/Elastic_Stars.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Expand_Images_on_Hover.md b/source/docs/sandbox/Expand_Images_on_Hover.md index f31754519..bf4e32977 100644 --- a/source/docs/sandbox/Expand_Images_on_Hover.md +++ b/source/docs/sandbox/Expand_Images_on_Hover.md @@ -1,8 +1,8 @@ -title: Expand Image on Hover ---- - -Instructions: Mouseover images. - -{% iframe /downloads/code/sandbox/Expand_Image_On_Hover.html %} - -{% include_code Konva Expand Image on Hover Demo sandbox/Expand_Image_On_Hover.html %} +title: Expand Image on Hover +--- + +Instructions: Mouseover images. + +{% iframe /downloads/code/sandbox/Expand_Image_On_Hover.html %} + +{% include_code Konva Expand Image on Hover Demo sandbox/Expand_Image_On_Hover.html %} diff --git a/source/docs/sandbox/Free_Drawing.md b/source/docs/sandbox/Free_Drawing.md index 4ecbb50b9..fe455a0c4 100644 --- a/source/docs/sandbox/Free_Drawing.md +++ b/source/docs/sandbox/Free_Drawing.md @@ -1,8 +1,8 @@ -title: Free Drawing Konva Demo ---- - -Instructions: Try on draw on stroked area - -{% iframe /downloads/code/sandbox/Free_Drawing.html %} - -{% include_code Konva Elastic Stars Demo sandbox/Free_Drawing.html %} +title: Free Drawing Konva Demo +--- + +Instructions: Try on draw on stroked area + +{% iframe /downloads/code/sandbox/Free_Drawing.html %} + +{% include_code Konva Elastic Stars Demo sandbox/Free_Drawing.html %} diff --git a/source/docs/sandbox/Image_Border_Highlighting.md b/source/docs/sandbox/Image_Border_Highlighting.md index 4c4b59319..26bf8bcc2 100644 --- a/source/docs/sandbox/Image_Border_Highlighting.md +++ b/source/docs/sandbox/Image_Border_Highlighting.md @@ -1,7 +1,7 @@ -title: Drag and Drop Multiple Images with Border Highlighting ---- - -{% iframe /downloads/code/sandbox/Image_Border_Highlighting.html %} - -{% include_code Konva Image Border Highlighting Demo sandbox/Image_Border_Highlighting.html %} - +title: Drag and Drop Multiple Images with Border Highlighting +--- + +{% iframe /downloads/code/sandbox/Image_Border_Highlighting.html %} + +{% include_code Konva Image Border Highlighting Demo sandbox/Image_Border_Highlighting.html %} + diff --git a/source/docs/sandbox/Image_Resize.md b/source/docs/sandbox/Image_Resize.md index d203bd4da..56eeb4b7e 100644 --- a/source/docs/sandbox/Image_Resize.md +++ b/source/docs/sandbox/Image_Resize.md @@ -1,6 +1,6 @@ -title: Drag, Drop, and Resize Images ---- - -{% iframe /downloads/code/sandbox/Image_Resize.html %} - -{% include_code Konva Drag, Drop, and Resize Images Demo sandbox/Image_Resize.html %} +title: Drag, Drop, and Resize Images +--- + +{% iframe /downloads/code/sandbox/Image_Resize.html %} + +{% include_code Konva Drag, Drop, and Resize Images Demo sandbox/Image_Resize.html %} diff --git a/source/docs/sandbox/Interactive_Building_Map.md b/source/docs/sandbox/Interactive_Building_Map.md index bac68a842..445fa086d 100644 --- a/source/docs/sandbox/Interactive_Building_Map.md +++ b/source/docs/sandbox/Interactive_Building_Map.md @@ -1,8 +1,8 @@ -title: Interactive Building Map ---- - -Instructions: hover over sections of the building to see its description - -{% iframe /downloads/code/sandbox/Interactive_Building_Map.html %} - +title: Interactive Building Map +--- + +Instructions: hover over sections of the building to see its description + +{% iframe /downloads/code/sandbox/Interactive_Building_Map.html %} + {% include_code Konva Interactive Building Map Demo sandbox/Interactive_Building_Map.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Modify_Curves_with_Anchor_Points.md b/source/docs/sandbox/Modify_Curves_with_Anchor_Points.md index 8038b2cad..4c033828b 100644 --- a/source/docs/sandbox/Modify_Curves_with_Anchor_Points.md +++ b/source/docs/sandbox/Modify_Curves_with_Anchor_Points.md @@ -1,9 +1,9 @@ -title: Modify Curves with Anchor Points ---- - -Instructions: Use your mouse or finger and drag and drop the anchor points to -modify the curvature of the quadratic curve and the Bezier curve. - -{% iframe /downloads/code/sandbox/Modify_Curves_with_Anchor_Points.html %} - +title: Modify Curves with Anchor Points +--- + +Instructions: Use your mouse or finger and drag and drop the anchor points to +modify the curvature of the quadratic curve and the Bezier curve. + +{% iframe /downloads/code/sandbox/Modify_Curves_with_Anchor_Points.html %} + {% include_code Konva Modify Curves with Anchor Points Demo sandbox/Modify_Curves_with_Anchor_Points.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Modify_Shape_Color_on_Click.md b/source/docs/sandbox/Modify_Shape_Color_on_Click.md index 805ca2307..3a7996ca0 100644 --- a/source/docs/sandbox/Modify_Shape_Color_on_Click.md +++ b/source/docs/sandbox/Modify_Shape_Color_on_Click.md @@ -1,8 +1,8 @@ -title: Modify Shape Color on Click ---- - -Instructions: Click on a shape to change its color - -{% iframe /downloads/code/sandbox/Modify_Shape_Color_on_Click.html %} - +title: Modify Shape Color on Click +--- + +Instructions: Click on a shape to change its color + +{% iframe /downloads/code/sandbox/Modify_Shape_Color_on_Click.html %} + {% include_code Konva Modify Shape Color on Click sandbox/Modify_Shape_Color_on_Click.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Multi-touch_Scale_Shape.md b/source/docs/sandbox/Multi-touch_Scale_Shape.md index 19ab44e3d..4744c89c2 100644 --- a/source/docs/sandbox/Multi-touch_Scale_Shape.md +++ b/source/docs/sandbox/Multi-touch_Scale_Shape.md @@ -1,10 +1,10 @@ -title: Multi-touch Scale Shape ---- - -Note: This lab only works on devices that support multi-touch gestures such as iOS because it makes use of multiple touch events. - -Instructions: Using a mobile device that supports multi-touch gestures such as iOS, drag and drop a shape by touching it and then dragging your finger across the screen, activate a shape by tapping on it, and scale an active shape by pinching the screen. - -{% iframe /downloads/code/sandbox/Multi-touch_Scale_Shape.html %} - +title: Multi-touch Scale Shape +--- + +Note: This lab only works on devices that support multi-touch gestures such as iOS because it makes use of multiple touch events. + +Instructions: Using a mobile device that supports multi-touch gestures such as iOS, drag and drop a shape by touching it and then dragging your finger across the screen, activate a shape by tapping on it, and scale an active shape by pinching the screen. + +{% iframe /downloads/code/sandbox/Multi-touch_Scale_Shape.html %} + {% include_code Konva Multi-touch Scale Shape sandbox/Multi-touch_Scale_Shape.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Multi-touch_Scale_Stage.md b/source/docs/sandbox/Multi-touch_Scale_Stage.md index aef519101..e19bccac1 100644 --- a/source/docs/sandbox/Multi-touch_Scale_Stage.md +++ b/source/docs/sandbox/Multi-touch_Scale_Stage.md @@ -1,10 +1,10 @@ -title: Multi-touch Scale Stage ---- - -Note: This lab only works on devices that support multi-touch gestures such as iOS because it makes use of multiple touch events. - -Instructions: Using a mobile device that supports multi-touch gestures such as iOS, use two fingers to zoom in or out of the stage - -{% iframe /downloads/code/sandbox/Multi-touch_Scale_Stage.html %} - +title: Multi-touch Scale Stage +--- + +Note: This lab only works on devices that support multi-touch gestures such as iOS because it makes use of multiple touch events. + +Instructions: Using a mobile device that supports multi-touch gestures such as iOS, use two fingers to zoom in or out of the stage + +{% iframe /downloads/code/sandbox/Multi-touch_Scale_Stage.html %} + {% include_code Konva Multi-touch Scale Stage sandbox/Multi-touch_Scale_Stage.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Physics_Simulator.md b/source/docs/sandbox/Physics_Simulator.md index 423ebac01..de5dfca50 100644 --- a/source/docs/sandbox/Physics_Simulator.md +++ b/source/docs/sandbox/Physics_Simulator.md @@ -1,8 +1,8 @@ -title: Physics Simulator with Curve Detection ---- - -Instructions: Throw the ball around with your cursor. - -{% iframe /downloads/code/sandbox/Physics_Simulator.html %} - +title: Physics Simulator with Curve Detection +--- + +Instructions: Throw the ball around with your cursor. + +{% iframe /downloads/code/sandbox/Physics_Simulator.html %} + {% include_code Konva Physics Simulator with Curve Detection sandbox/Physics_Simulator.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Planets_Image_Map.md b/source/docs/sandbox/Planets_Image_Map.md index e0dabbf7b..dc8e3382a 100644 --- a/source/docs/sandbox/Planets_Image_Map.md +++ b/source/docs/sandbox/Planets_Image_Map.md @@ -1,8 +1,8 @@ -title: Planets Image Map ---- - -Instructions: Mouse over the planets to see their names and use the check box to show and hide the map overlay. - -{% iframe /downloads/code/sandbox/Planets_Image_Map.html %} - +title: Planets Image Map +--- + +Instructions: Mouse over the planets to see their names and use the check box to show and hide the map overlay. + +{% iframe /downloads/code/sandbox/Planets_Image_Map.html %} + {% include_code Konva Planets Image Map sandbox/Planets_Image_Map.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Quantum_Squiggle.md b/source/docs/sandbox/Quantum_Squiggle.md index f14c698d6..747cf9a43 100644 --- a/source/docs/sandbox/Quantum_Squiggle.md +++ b/source/docs/sandbox/Quantum_Squiggle.md @@ -1,8 +1,8 @@ -title: Oscillating Blobs ---- - -Instructions: Refresh the page to generate new blobs. You can also drag and drop the blobs as they animate. - -{% iframe /downloads/code/sandbox/Quantum_Squiggle.html %} - +title: Oscillating Blobs +--- + +Instructions: Refresh the page to generate new blobs. You can also drag and drop the blobs as they animate. + +{% iframe /downloads/code/sandbox/Quantum_Squiggle.html %} + {% include_code Konva Quantum Squiggle Demo sandbox/Quantum_Squiggle.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Shape_Tango.md b/source/docs/sandbox/Shape_Tango.md index 903c42e56..31109f064 100644 --- a/source/docs/sandbox/Shape_Tango.md +++ b/source/docs/sandbox/Shape_Tango.md @@ -1,9 +1,9 @@ -title: Shape Tango ---- -#HTML5 Canvas Shape Tango with Konva - -Instructions: drag and drop the shapes and press the "Tango" button to make the shapes move. refresh the page to generate new random shapes. - -{% iframe /downloads/code/sandbox/Shape_Tango.html %} - +title: Shape Tango +--- +#HTML5 Canvas Shape Tango with Konva + +Instructions: drag and drop the shapes and press the "Tango" button to make the shapes move. refresh the page to generate new random shapes. + +{% iframe /downloads/code/sandbox/Shape_Tango.html %} + {% include_code Konva Shape Tango sandbox/Shape_Tango.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Shape_Tooltips.md b/source/docs/sandbox/Shape_Tooltips.md index 92295ca82..27d785bb7 100644 --- a/source/docs/sandbox/Shape_Tooltips.md +++ b/source/docs/sandbox/Shape_Tooltips.md @@ -1,9 +1,9 @@ -title: Shape Tooltips ---- -#HTML5 Canvas Shape Tooltips with Konva - -Instructions: Mousemove over shape to see the tooltip. - -{% iframe /downloads/code/sandbox/Shape_Tooltips.html %} - +title: Shape Tooltips +--- +#HTML5 Canvas Shape Tooltips with Konva + +Instructions: Mousemove over shape to see the tooltip. + +{% iframe /downloads/code/sandbox/Shape_Tooltips.html %} + {% include_code Konva Shape Tooltips sandbox/Shape_Tooltips.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Star_Spiner.md b/source/docs/sandbox/Star_Spiner.md index 2ad27f3d9..dcd9be3ad 100644 --- a/source/docs/sandbox/Star_Spiner.md +++ b/source/docs/sandbox/Star_Spiner.md @@ -1,8 +1,8 @@ -title: Star Spinner ---- - -Instructions: Spin the star with your mouse. - -{% iframe /downloads/code/sandbox/Star_Spinner.html %} - +title: Star Spinner +--- + +Instructions: Spin the star with your mouse. + +{% iframe /downloads/code/sandbox/Star_Spinner.html %} + {% include_code Konva Star Spinner sandbox/Star_Spinner.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Wheel_of_Fortune.md b/source/docs/sandbox/Wheel_of_Fortune.md index 054d3407b..223b88305 100644 --- a/source/docs/sandbox/Wheel_of_Fortune.md +++ b/source/docs/sandbox/Wheel_of_Fortune.md @@ -1,8 +1,8 @@ -title: Wheel of Fortune ---- - -Instructions: Spin the wheel and make a fortune! - -{% iframe /downloads/code/sandbox/Wheel_of_Fortune.html %} - +title: Wheel of Fortune +--- + +Instructions: Spin the wheel and make a fortune! + +{% iframe /downloads/code/sandbox/Wheel_of_Fortune.html %} + {% include_code Konva Wheel of Fortune sandbox/Wheel_of_Fortune.html %} \ No newline at end of file diff --git a/source/docs/sandbox/Zoom_Layer_On_hover.md b/source/docs/sandbox/Zoom_Layer_On_hover.md index 65f264898..5f9163180 100644 --- a/source/docs/sandbox/Zoom_Layer_On_hover.md +++ b/source/docs/sandbox/Zoom_Layer_On_hover.md @@ -1,8 +1,8 @@ -title: Zoom Image on Hover ---- - -Instructions: Hover over an Image. - -{% iframe /downloads/code/sandbox/Zoom_Layer_On_Hover.html %} - +title: Zoom Image on Hover +--- + +Instructions: Hover over an Image. + +{% iframe /downloads/code/sandbox/Zoom_Layer_On_Hover.html %} + {% include_code Konva Zoom Image on Hover Demo sandbox/Zoom_Layer_On_Hover.html %} \ No newline at end of file diff --git a/source/docs/sandbox/index.md b/source/docs/sandbox/index.md index cad4bf05b..bbcc24b7a 100644 --- a/source/docs/sandbox/index.md +++ b/source/docs/sandbox/index.md @@ -1,27 +1,27 @@ -title: Demos ---- - -### [Free Drawing](Free_Drawing.html) -### [Zoom Layer On hover](Zoom_Layer_On_hover.html) -### [Wheel of Fortune](Wheel_of_Fortune.html) -### [Quantum Squiggle](Quantum_Squiggle.html) -### [20000 Nodes](20000_Nodes.html) -### [Elastic Stars](Elastic_Stars.html) -### [Shape Tango](Shape_Tango.html) -### [Multi-touch Scale Shape](Multi-touch_Scale_Shape.html) -### [Multi-touch Scale Stage](Multi-touch_Scale_Stage.html) -### [Interactive Building Map](Interactive_Building_Map.html) -### [Modify Curves with Anchor Points](Modify_Curves_with_Anchor_Points.html) -### [Drag and Drop Stress Test](Drag_and_Drop_Stress_Test.html) -### [Animals on the Beach Game](Animals_on_the_Beach_Game.html) -### [Animation Stress Test](Animation_Stress_Test.html) -### [10000 Shapes with Tooltips](10000_Shapes_with_Tooltip.html) -### [Modify Shape Color on Click](Modify_Shape_Color_on_Click.html) -### [Physics Simulator](Physics_Simulator.html) -### [Expand Images on Hover](Expand_Images_on_Hover.html) -### [Planets Image Map](Planets_Image_Map.html) -### [Image Resize](Image_Resize.html) -### [Shape Tooltips](Shape_Tooltips.html) -### [Star Spiner](Star_Spiner.html) -### [Drag and Drop Multiple Shapes](Drag_and_Drop_Multiple_Shapes.html) -### [Image Border Highlighting](Image_Border_Highlighting.html) +title: Demos +--- + +### [Free Drawing](Free_Drawing.html) +### [Zoom Layer On hover](Zoom_Layer_On_hover.html) +### [Wheel of Fortune](Wheel_of_Fortune.html) +### [Quantum Squiggle](Quantum_Squiggle.html) +### [20000 Nodes](20000_Nodes.html) +### [Elastic Stars](Elastic_Stars.html) +### [Shape Tango](Shape_Tango.html) +### [Multi-touch Scale Shape](Multi-touch_Scale_Shape.html) +### [Multi-touch Scale Stage](Multi-touch_Scale_Stage.html) +### [Interactive Building Map](Interactive_Building_Map.html) +### [Modify Curves with Anchor Points](Modify_Curves_with_Anchor_Points.html) +### [Drag and Drop Stress Test](Drag_and_Drop_Stress_Test.html) +### [Animals on the Beach Game](Animals_on_the_Beach_Game.html) +### [Animation Stress Test](Animation_Stress_Test.html) +### [10000 Shapes with Tooltips](10000_Shapes_with_Tooltip.html) +### [Modify Shape Color on Click](Modify_Shape_Color_on_Click.html) +### [Physics Simulator](Physics_Simulator.html) +### [Expand Images on Hover](Expand_Images_on_Hover.html) +### [Planets Image Map](Planets_Image_Map.html) +### [Image Resize](Image_Resize.html) +### [Shape Tooltips](Shape_Tooltips.html) +### [Star Spiner](Star_Spiner.html) +### [Drag and Drop Multiple Shapes](Drag_and_Drop_Multiple_Shapes.html) +### [Image Border Highlighting](Image_Border_Highlighting.html) diff --git a/source/docs/selectors/Select_by_Name.md b/source/docs/selectors/Select_by_Name.md index cd483f4df..7760098a7 100644 --- a/source/docs/selectors/Select_by_Name.md +++ b/source/docs/selectors/Select_by_Name.md @@ -1,11 +1,11 @@ -title: Select Shape by Name Tutorial ---- - -To select shapes by name with Konva, we can use the `find()` method using the `.` selector. -The `find()` method returns an array of nodes that match the selector string. -The return array is a `Konva.Collection` array, which is basically a typical JavaScript array with a special `each()` method. -The `each()` method enables us to quickly iterate through every node in the array. - -{% iframe /downloads/code/selectors/Select_by_Name.html %} - +title: Select Shape by Name Tutorial +--- + +To select shapes by name with Konva, we can use the `find()` method using the `.` selector. +The `find()` method returns an array of nodes that match the selector string. +The return array is a `Konva.Collection` array, which is basically a typical JavaScript array with a special `each()` method. +The `each()` method enables us to quickly iterate through every node in the array. + +{% iframe /downloads/code/selectors/Select_by_Name.html %} + {% include_code Konva Select Shape by Name Demo selectors/Select_by_Name.html %} \ No newline at end of file diff --git a/source/docs/selectors/Select_by_Type.md b/source/docs/selectors/Select_by_Type.md index 93852d281..01b72323f 100644 --- a/source/docs/selectors/Select_by_Type.md +++ b/source/docs/selectors/Select_by_Type.md @@ -1,11 +1,11 @@ -title: Select Shape by Type Tutorial ---- - -To select shapes by type with Konva, we can use the `find()` method with the name of the type or class name. -The `find()` method returns an array of nodes that match the selector string. -The return array is a `Konva.Collection` array, which is basically a typical JavaScript array with a special `each()` method. -The `each()` method enables us to quickly iterate through every node in the array. - -{% iframe /downloads/code/selectors/Select_by_Type.html %} - +title: Select Shape by Type Tutorial +--- + +To select shapes by type with Konva, we can use the `find()` method with the name of the type or class name. +The `find()` method returns an array of nodes that match the selector string. +The return array is a `Konva.Collection` array, which is basically a typical JavaScript array with a special `each()` method. +The `each()` method enables us to quickly iterate through every node in the array. + +{% iframe /downloads/code/selectors/Select_by_Type.html %} + {% include_code Konva Select Shape by Type Demo selectors/Select_by_Type.html %} \ No newline at end of file diff --git a/source/docs/selectors/Select_by_id.md b/source/docs/selectors/Select_by_id.md index 071a95814..279ce3c96 100644 --- a/source/docs/selectors/Select_by_id.md +++ b/source/docs/selectors/Select_by_id.md @@ -1,13 +1,13 @@ -title: Select Shape by id Tutorial ---- - -To select a shape by id with Konva, we can use the `find()` method using the # selector. -The `find()` method always returns an array of elements, even if we are expecting it to return one element. -if you need only one element you can use `findOne()` method. -The `find()` method works for any node, including the stage, layers, groups, and shapes. - -Instructions: press the "Activate Rectangle" button to select the rectangle by id and perform a transition. You can also drag and drop the rectangle. - -{% iframe /downloads/code/selectors/Select_by_id.html %} - +title: Select Shape by id Tutorial +--- + +To select a shape by id with Konva, we can use the `find()` method using the # selector. +The `find()` method always returns an array of elements, even if we are expecting it to return one element. +if you need only one element you can use `findOne()` method. +The `find()` method works for any node, including the stage, layers, groups, and shapes. + +Instructions: press the "Activate Rectangle" button to select the rectangle by id and perform a transition. You can also drag and drop the rectangle. + +{% iframe /downloads/code/selectors/Select_by_id.html %} + {% include_code Konva Select Shape by id Demo selectors/Select_by_id.html %} \ No newline at end of file diff --git a/source/docs/shapes/Arc.md b/source/docs/shapes/Arc.md index 10bd486a0..30fff3cba 100644 --- a/source/docs/shapes/Arc.md +++ b/source/docs/shapes/Arc.md @@ -1,10 +1,10 @@ -title: Arc Tutorial ---- - -To create a ring shape with `Konva`, we can instantiate a `Konva.Arc()` object. - -For a full list of attributes and methods, check out the [Konva.Arc documentation](http://konvajs.github.io/api/Konva.Arc.html). - -{% iframe /downloads/code/shapes/Arc.html %} - -{% include_code Konva Arc Demo shapes/Arc.html %} +title: Arc Tutorial +--- + +To create a ring shape with `Konva`, we can instantiate a `Konva.Arc()` object. + +For a full list of attributes and methods, check out the [Konva.Arc documentation](http://konvajs.github.io/api/Konva.Arc.html). + +{% iframe /downloads/code/shapes/Arc.html %} + +{% include_code Konva Arc Demo shapes/Arc.html %} diff --git a/source/docs/shapes/Arrow.md b/source/docs/shapes/Arrow.md index 14a29453a..5b07dcf7f 100644 --- a/source/docs/shapes/Arrow.md +++ b/source/docs/shapes/Arrow.md @@ -1,10 +1,10 @@ -title: Arrow Tutorial ---- - -To create an arrow with `Konva`, we can instantiate a `Konva.Arrow()` object. - -For a full list of attributes and methods, check out the [Konva.Arrow documentation](http://konvajs.github.io/api/Konva.Arrow.html). - -{% iframe /downloads/code/shapes/Arrow.html %} - +title: Arrow Tutorial +--- + +To create an arrow with `Konva`, we can instantiate a `Konva.Arrow()` object. + +For a full list of attributes and methods, check out the [Konva.Arrow documentation](http://konvajs.github.io/api/Konva.Arrow.html). + +{% iframe /downloads/code/shapes/Arrow.html %} + {% include_code Konva Arrow Demo shapes/Arrow.html %} \ No newline at end of file diff --git a/source/docs/shapes/Circle.md b/source/docs/shapes/Circle.md index 944b2a460..8e2d63883 100644 --- a/source/docs/shapes/Circle.md +++ b/source/docs/shapes/Circle.md @@ -1,10 +1,10 @@ -title: Circle Tutorial ---- - -To create a circle with `Konva`, we can instantiate a `Konva.Circle()` object. - -For a full list of attributes and methods, check out the [Konva.Circle documentation](http://konvajs.github.io/api/Konva.Circle.html). - -{% iframe /downloads/code/shapes/Circle.html %} - +title: Circle Tutorial +--- + +To create a circle with `Konva`, we can instantiate a `Konva.Circle()` object. + +For a full list of attributes and methods, check out the [Konva.Circle documentation](http://konvajs.github.io/api/Konva.Circle.html). + +{% iframe /downloads/code/shapes/Circle.html %} + {% include_code Konva Circle Demo shapes/Circle.html %} \ No newline at end of file diff --git a/source/docs/shapes/Custom.md b/source/docs/shapes/Custom.md index 226e6ffbc..ebfa00b24 100644 --- a/source/docs/shapes/Custom.md +++ b/source/docs/shapes/Custom.md @@ -1,14 +1,14 @@ -title: Custom Shape Tutorial ---- - -To create a custom shape with Konva, we can instantiate a `Konva.Shape()` object. - -When creating a custom shape, we need to define a drawing function that is passed a Konva.Canvas renderer. - -We can use the renderer to access the HTML5 Canvas context, and to use special methods like `context.fillStrokeShape(this)` which automatically handles filling, stroking, and applying shadows. - -For a full list of attributes and methods, check out the [Konva.Shape documentation](http://konvajs.github.io/api/Konva.Shape.html) - -{% iframe /downloads/code/shapes/Custom.html %} - -{% include_code Konva Custom Demo shapes/Custom.html %} +title: Custom Shape Tutorial +--- + +To create a custom shape with Konva, we can instantiate a `Konva.Shape()` object. + +When creating a custom shape, we need to define a drawing function that is passed a Konva.Canvas renderer. + +We can use the renderer to access the HTML5 Canvas context, and to use special methods like `context.fillStrokeShape(this)` which automatically handles filling, stroking, and applying shadows. + +For a full list of attributes and methods, check out the [Konva.Shape documentation](http://konvajs.github.io/api/Konva.Shape.html) + +{% iframe /downloads/code/shapes/Custom.html %} + +{% include_code Konva Custom Demo shapes/Custom.html %} diff --git a/source/docs/shapes/Ellipse.md b/source/docs/shapes/Ellipse.md index af191d690..5f461c2b9 100644 --- a/source/docs/shapes/Ellipse.md +++ b/source/docs/shapes/Ellipse.md @@ -1,11 +1,11 @@ -title: Ellipse Tutorial ---- - -To create a ellipse with `Konva`, we can instantiate a `Konva.Ellipse()` object. - -For a full list of attributes and methods, check out the [Konva.Ellipse documentation](http://konvajs.github.io/api/Konva.Ellipse.html). - -{% iframe /downloads/code/shapes/Ellipse.html %} - -{% include_code Konva Ellipse Demo shapes/Ellipse.html %} - +title: Ellipse Tutorial +--- + +To create a ellipse with `Konva`, we can instantiate a `Konva.Ellipse()` object. + +For a full list of attributes and methods, check out the [Konva.Ellipse documentation](http://konvajs.github.io/api/Konva.Ellipse.html). + +{% iframe /downloads/code/shapes/Ellipse.html %} + +{% include_code Konva Ellipse Demo shapes/Ellipse.html %} + diff --git a/source/docs/shapes/Image.md b/source/docs/shapes/Image.md index 9a2fcca67..dc9c24dd6 100644 --- a/source/docs/shapes/Image.md +++ b/source/docs/shapes/Image.md @@ -1,10 +1,10 @@ -title: Image Tutorial ---- - -To create an image with `Konva`, we can instantiate a `Konva.Image()` object. - -For a full list of attributes and methods, check out the [Konva.Image documentation](http://konvajs.github.io/api/Konva.Image.html). - -{% iframe /downloads/code/shapes/Image.html %} - +title: Image Tutorial +--- + +To create an image with `Konva`, we can instantiate a `Konva.Image()` object. + +For a full list of attributes and methods, check out the [Konva.Image documentation](http://konvajs.github.io/api/Konva.Image.html). + +{% iframe /downloads/code/shapes/Image.html %} + {% include_code Konva Image Demo shapes/Image.html %} \ No newline at end of file diff --git a/source/docs/shapes/Label.md b/source/docs/shapes/Label.md index d2f366bfd..5d01a1463 100644 --- a/source/docs/shapes/Label.md +++ b/source/docs/shapes/Label.md @@ -1,10 +1,10 @@ -title: Label Tutorial ---- - -To create a text label with Konva, which can be used for creating text with backgrounds, simple tooltips, or tooltips with pointers, we can instantiate a `Konva.Label()` object. - -For a full list of attributes and methods, check out the [Konva.Label documentation](http://konvajs.github.io/api/Konva.Label.html). - -{% iframe /downloads/code/shapes/Label.html %} - +title: Label Tutorial +--- + +To create a text label with Konva, which can be used for creating text with backgrounds, simple tooltips, or tooltips with pointers, we can instantiate a `Konva.Label()` object. + +For a full list of attributes and methods, check out the [Konva.Label documentation](http://konvajs.github.io/api/Konva.Label.html). + +{% iframe /downloads/code/shapes/Label.html %} + {% include_code Konva Label Demo shapes/Label.html %} \ No newline at end of file diff --git a/source/docs/shapes/Line_-_Blob.md b/source/docs/shapes/Line_-_Blob.md index f00a0f49a..bc40e73d7 100644 --- a/source/docs/shapes/Line_-_Blob.md +++ b/source/docs/shapes/Line_-_Blob.md @@ -1,10 +1,10 @@ -title: Blob Tutorial ---- - -To create a blob with `Konva`, we can instantiate a `Konva.Line()` object with `closed = true` and `tension` attributes. - -For a full list of attributes and methods, check out the [Konva.Line documentation](http://konvajs.github.io/api/Konva.Line.html). - -{% iframe /downloads/code/shapes/Line_-_Blob.html %} - +title: Blob Tutorial +--- + +To create a blob with `Konva`, we can instantiate a `Konva.Line()` object with `closed = true` and `tension` attributes. + +For a full list of attributes and methods, check out the [Konva.Line documentation](http://konvajs.github.io/api/Konva.Line.html). + +{% iframe /downloads/code/shapes/Line_-_Blob.html %} + {% include_code Konva Blob Demo shapes/Line_-_Blob.html %} \ No newline at end of file diff --git a/source/docs/shapes/Line_-_Polygon.md b/source/docs/shapes/Line_-_Polygon.md index 2eab40bed..c4eb30a03 100644 --- a/source/docs/shapes/Line_-_Polygon.md +++ b/source/docs/shapes/Line_-_Polygon.md @@ -1,10 +1,10 @@ -title: Polygon Tutorial ---- - -To create a polygon with `Konva`, we can instantiate a `Konva.Line()` object with `closed = true` attribute. - -For a full list of attributes and methods, check out the [Konva.Line documentation](http://konvajs.github.io/api/Konva.Line.html). - -{% iframe /downloads/code/shapes/Line_-_Polygon.html %} - +title: Polygon Tutorial +--- + +To create a polygon with `Konva`, we can instantiate a `Konva.Line()` object with `closed = true` attribute. + +For a full list of attributes and methods, check out the [Konva.Line documentation](http://konvajs.github.io/api/Konva.Line.html). + +{% iframe /downloads/code/shapes/Line_-_Polygon.html %} + {% include_code Konva Polygon Demo shapes/Line_-_Polygon.html %} \ No newline at end of file diff --git a/source/docs/shapes/Line_-_Simple_Line.md b/source/docs/shapes/Line_-_Simple_Line.md index 9da16e7df..d2827487e 100644 --- a/source/docs/shapes/Line_-_Simple_Line.md +++ b/source/docs/shapes/Line_-_Simple_Line.md @@ -1,10 +1,10 @@ -title: Line Tutorial ---- - -To create a line with `Konva`, we can instantiate a `Konva.Line()` object. - -For a full list of attributes and methods, check out the [Konva.Line documentation](http://konvajs.github.io/api/Konva.Line.html). - -{% iframe /downloads/code/shapes/Line_-_Simple_line.html %} - +title: Line Tutorial +--- + +To create a line with `Konva`, we can instantiate a `Konva.Line()` object. + +For a full list of attributes and methods, check out the [Konva.Line documentation](http://konvajs.github.io/api/Konva.Line.html). + +{% iframe /downloads/code/shapes/Line_-_Simple_line.html %} + {% include_code Konva Line Demo shapes/Line_-_Simple_line.html %} \ No newline at end of file diff --git a/source/docs/shapes/Line_-_Spline.md b/source/docs/shapes/Line_-_Spline.md index 6f862fa05..04fcaa386 100644 --- a/source/docs/shapes/Line_-_Spline.md +++ b/source/docs/shapes/Line_-_Spline.md @@ -1,10 +1,10 @@ -title: Spline Tutorial ---- - -To create a spline with `Konva`, we can instantiate a `Konva.Line()` object with `tension` attribute. - -For a full list of attributes and methods, check out the [Konva.Line documentation](http://konvajs.github.io/api/Konva.Line.html). - -{% iframe /downloads/code/shapes/Line_-_Spline.html %} - +title: Spline Tutorial +--- + +To create a spline with `Konva`, we can instantiate a `Konva.Line()` object with `tension` attribute. + +For a full list of attributes and methods, check out the [Konva.Line documentation](http://konvajs.github.io/api/Konva.Line.html). + +{% iframe /downloads/code/shapes/Line_-_Spline.html %} + {% include_code Konva Spline Demo shapes/Line_-_Spline.html %} \ No newline at end of file diff --git a/source/docs/shapes/Path.md b/source/docs/shapes/Path.md index f5989d7fa..c2a05d735 100644 --- a/source/docs/shapes/Path.md +++ b/source/docs/shapes/Path.md @@ -1,12 +1,12 @@ -title: Path Tutorial ---- - -To create an SVG path with Konva, we can instantiate a `Konva.Path()` object. - -Paths are most commonly used when we want to export an SVG Path into an HTML5 Canvas path, or if we want to manifest complex drawings as a data string rather than creating a custom shape. - -For a full list of attributes and methods, check out the [Konva.Path documentation](http://konvajs.github.io/api/Konva.Path.html). - -{% iframe /downloads/code/shapes/Path.html %} - +title: Path Tutorial +--- + +To create an SVG path with Konva, we can instantiate a `Konva.Path()` object. + +Paths are most commonly used when we want to export an SVG Path into an HTML5 Canvas path, or if we want to manifest complex drawings as a data string rather than creating a custom shape. + +For a full list of attributes and methods, check out the [Konva.Path documentation](http://konvajs.github.io/api/Konva.Path.html). + +{% iframe /downloads/code/shapes/Path.html %} + {% include_code Konva Path Demo shapes/Path.html %} \ No newline at end of file diff --git a/source/docs/shapes/Rect.md b/source/docs/shapes/Rect.md index e0d3f34d5..cf24c1d97 100644 --- a/source/docs/shapes/Rect.md +++ b/source/docs/shapes/Rect.md @@ -1,10 +1,10 @@ -title: Rect Tutorial ---- - -To create a rectangle with `Konva`, we can instantiate a `Konva.Rect()` object. - -For a full list of attributes and methods, check out the [Konva.Rect documentation](http://konvajs.github.io/api/Konva.Rect.html). - -{% iframe /downloads/code/shapes/rect.html %} - -{% include_code Konva Rect Demo shapes/rect.html %} +title: Rect Tutorial +--- + +To create a rectangle with `Konva`, we can instantiate a `Konva.Rect()` object. + +For a full list of attributes and methods, check out the [Konva.Rect documentation](http://konvajs.github.io/api/Konva.Rect.html). + +{% iframe /downloads/code/shapes/rect.html %} + +{% include_code Konva Rect Demo shapes/rect.html %} diff --git a/source/docs/shapes/RegularPolygon.md b/source/docs/shapes/RegularPolygon.md index 2414ccd8d..0181c8e25 100644 --- a/source/docs/shapes/RegularPolygon.md +++ b/source/docs/shapes/RegularPolygon.md @@ -1,10 +1,10 @@ -title: Regular Polygon Tutorial ---- - -To create a regular polygon with `Konva`, we can instantiate a `Konva.RegularPolygon()` object. - -For a full list of attributes and methods, check out the [Konva.RegularPolygon documentation](http://konvajs.github.io/api/Konva.RegularPolygon.html). - -{% iframe /downloads/code/shapes/RegularPolygon.html %} - +title: Regular Polygon Tutorial +--- + +To create a regular polygon with `Konva`, we can instantiate a `Konva.RegularPolygon()` object. + +For a full list of attributes and methods, check out the [Konva.RegularPolygon documentation](http://konvajs.github.io/api/Konva.RegularPolygon.html). + +{% iframe /downloads/code/shapes/RegularPolygon.html %} + {% include_code Konva RegularPolygon Demo shapes/RegularPolygon.html %} \ No newline at end of file diff --git a/source/docs/shapes/Ring.md b/source/docs/shapes/Ring.md index 74dac0cd3..a1ad198b5 100644 --- a/source/docs/shapes/Ring.md +++ b/source/docs/shapes/Ring.md @@ -1,10 +1,10 @@ -title: Ring Tutorial ---- - -To create a ring shape with `Konva`, we can instantiate a `Konva.Ring()` object. - -For a full list of attributes and methods, check out the [Konva.Ring documentation](http://konvajs.github.io/api/Konva.Ring.html). - -{% iframe /downloads/code/shapes/Ring.html %} - -{% include_code Konva Ring Demo shapes/Ring.html %} +title: Ring Tutorial +--- + +To create a ring shape with `Konva`, we can instantiate a `Konva.Ring()` object. + +For a full list of attributes and methods, check out the [Konva.Ring documentation](http://konvajs.github.io/api/Konva.Ring.html). + +{% iframe /downloads/code/shapes/Ring.html %} + +{% include_code Konva Ring Demo shapes/Ring.html %} diff --git a/source/docs/shapes/Sprite.md b/source/docs/shapes/Sprite.md index 3e66aee4b..0f1b69e21 100644 --- a/source/docs/shapes/Sprite.md +++ b/source/docs/shapes/Sprite.md @@ -1,10 +1,10 @@ -title: Sprite Tutorial ---- - -To create a sprite with `Konva`, we can instantiate a `Konva.Sprite()` object. - -For a full list of attributes and methods, check out the [Konva.Sprite documentation](http://konvajs.github.io/api/Konva.Sprite.html). - -{% iframe /downloads/code/shapes/Sprite.html %} - -{% include_code Konva Sprite Demo shapes/Sprite.html %} +title: Sprite Tutorial +--- + +To create a sprite with `Konva`, we can instantiate a `Konva.Sprite()` object. + +For a full list of attributes and methods, check out the [Konva.Sprite documentation](http://konvajs.github.io/api/Konva.Sprite.html). + +{% iframe /downloads/code/shapes/Sprite.html %} + +{% include_code Konva Sprite Demo shapes/Sprite.html %} diff --git a/source/docs/shapes/Star.md b/source/docs/shapes/Star.md index 74a899599..e573fd9f6 100644 --- a/source/docs/shapes/Star.md +++ b/source/docs/shapes/Star.md @@ -1,10 +1,10 @@ -title: Star Tutorial ---- - -To create a start with `Konva`, we can instantiate a `Konva.Star()` object. - -For a full list of attributes and methods, check out the [Konva.Star documentation](http://konvajs.github.io/api/Konva.Star.html). - -{% iframe /downloads/code/shapes/Star.html %} - -{% include_code Konva Star Demo shapes/Star.html %} +title: Star Tutorial +--- + +To create a start with `Konva`, we can instantiate a `Konva.Star()` object. + +For a full list of attributes and methods, check out the [Konva.Star documentation](http://konvajs.github.io/api/Konva.Star.html). + +{% iframe /downloads/code/shapes/Star.html %} + +{% include_code Konva Star Demo shapes/Star.html %} diff --git a/source/docs/shapes/Text.md b/source/docs/shapes/Text.md index 9c8c916ca..0cc321b83 100644 --- a/source/docs/shapes/Text.md +++ b/source/docs/shapes/Text.md @@ -1,10 +1,10 @@ -title: Text Tutorial ---- - -To create text with `Konva`, we can instantiate a `Konva.Text()` object. - -For a full list of attributes and methods, check out the [Konva.Text documentation](http://konvajs.github.io/api/Konva.Text.html). - -{% iframe /downloads/code/shapes/Text.html %} - -{% include_code Konva Text Demo shapes/Text.html %} +title: Text Tutorial +--- + +To create text with `Konva`, we can instantiate a `Konva.Text()` object. + +For a full list of attributes and methods, check out the [Konva.Text documentation](http://konvajs.github.io/api/Konva.Text.html). + +{% iframe /downloads/code/shapes/Text.html %} + +{% include_code Konva Text Demo shapes/Text.html %} diff --git a/source/docs/shapes/TextPath.md b/source/docs/shapes/TextPath.md index 272c61d76..9edbaee04 100644 --- a/source/docs/shapes/TextPath.md +++ b/source/docs/shapes/TextPath.md @@ -1,10 +1,10 @@ -title: TextPath Tutorial ---- - -To create a text path with `Konva`, we can instantiate a `Konva.TextPath()` object. - -For a full list of attributes and methods, check out the [Konva.TextPath documentation](http://konvajs.github.io/api/Konva.TextPath.html). - -{% iframe /downloads/code/shapes/TextPath.html %} - -{% include_code Konva TextPath Demo shapes/TextPath.html %} +title: TextPath Tutorial +--- + +To create a text path with `Konva`, we can instantiate a `Konva.TextPath()` object. + +For a full list of attributes and methods, check out the [Konva.TextPath documentation](http://konvajs.github.io/api/Konva.TextPath.html). + +{% iframe /downloads/code/shapes/TextPath.html %} + +{% include_code Konva TextPath Demo shapes/TextPath.html %} diff --git a/source/docs/shapes/Wedge.md b/source/docs/shapes/Wedge.md index 65307aa71..2d798f7d2 100644 --- a/source/docs/shapes/Wedge.md +++ b/source/docs/shapes/Wedge.md @@ -1,10 +1,10 @@ -title: Wedge Tutorial ---- - -To create a wedge with `Konva`, we can instantiate a `Konva.Wedge()` object. - -For a full list of attributes and methods, check out the [Konva.Wedge documentation](http://konvajs.github.io/api/Konva.Wedge.html). - -{% iframe /downloads/code/shapes/Wedge.html %} - -{% include_code Konva Wedge Demo shapes/Wedge.html %} +title: Wedge Tutorial +--- + +To create a wedge with `Konva`, we can instantiate a `Konva.Wedge()` object. + +For a full list of attributes and methods, check out the [Konva.Wedge documentation](http://konvajs.github.io/api/Konva.Wedge.html). + +{% iframe /downloads/code/shapes/Wedge.html %} + +{% include_code Konva Wedge Demo shapes/Wedge.html %} diff --git a/source/docs/styling/Fill.md b/source/docs/styling/Fill.md index c377e233e..18024c527 100644 --- a/source/docs/styling/Fill.md +++ b/source/docs/styling/Fill.md @@ -1,12 +1,12 @@ -title: Set Fill Tutorial ---- - -To fill a shape with Konva, we can set the fill property when we instantiate a shape, or we can use the `fill()` method. - -Konva supports colors, patterns, linear gradients, and radial gradients. - -Instructions: Mouseover each pentagon to change its fill. You can also drag and drop the shapes. - -{% iframe /downloads/code/styling/Fill.html %} - +title: Set Fill Tutorial +--- + +To fill a shape with Konva, we can set the fill property when we instantiate a shape, or we can use the `fill()` method. + +Konva supports colors, patterns, linear gradients, and radial gradients. + +Instructions: Mouseover each pentagon to change its fill. You can also drag and drop the shapes. + +{% iframe /downloads/code/styling/Fill.html %} + {% include_code Konva Fill Demo styling/Fill.html %} \ No newline at end of file diff --git a/source/docs/styling/Hide_and_Show.md b/source/docs/styling/Hide_and_Show.md index fbd66f9ce..e91911f36 100644 --- a/source/docs/styling/Hide_and_Show.md +++ b/source/docs/styling/Hide_and_Show.md @@ -1,10 +1,10 @@ -title: Hide and Show Shape Tutorial ---- - -To hide and show a shape with Konva, we can set the visible property when we instantiate a shape, or we can use the `hide()` and `show()` methods. - -Instructions: Click on the buttons to show and hide the shape. - -{% iframe /downloads/code/styling/Hide_and_Show.html %} - +title: Hide and Show Shape Tutorial +--- + +To hide and show a shape with Konva, we can set the visible property when we instantiate a shape, or we can use the `hide()` and `show()` methods. + +Instructions: Click on the buttons to show and hide the shape. + +{% iframe /downloads/code/styling/Hide_and_Show.html %} + {% include_code Konva Hide and Show Demo styling/Hide_and_Show.html %} \ No newline at end of file diff --git a/source/docs/styling/Line_Join.md b/source/docs/styling/Line_Join.md index 10b340713..441aef468 100644 --- a/source/docs/styling/Line_Join.md +++ b/source/docs/styling/Line_Join.md @@ -1,12 +1,12 @@ -title: Line Join Tutorial ---- - -To set the line join for a shape with Konva, we can set the `lineJoin` property when we instantiate a shape, or we can use the `lineJoin()` method. - -The `lineJoin` property can be set to `miter`, `bevel`, or `round`. Unless otherwise specified, the default line join is `miter`. - -Instructions: Mouseover the triangle to change the line join style. - -{% iframe /downloads/code/styling/Line_Join.html %} - +title: Line Join Tutorial +--- + +To set the line join for a shape with Konva, we can set the `lineJoin` property when we instantiate a shape, or we can use the `lineJoin()` method. + +The `lineJoin` property can be set to `miter`, `bevel`, or `round`. Unless otherwise specified, the default line join is `miter`. + +Instructions: Mouseover the triangle to change the line join style. + +{% iframe /downloads/code/styling/Line_Join.html %} + {% include_code Konva Line Join Demo styling/Line_Join.html %} \ No newline at end of file diff --git a/source/docs/styling/Opacity.md b/source/docs/styling/Opacity.md index 8aa520314..569fcff9b 100644 --- a/source/docs/styling/Opacity.md +++ b/source/docs/styling/Opacity.md @@ -1,12 +1,12 @@ -title: Opacity Tutorial ---- - -To set a shape opacity with Konva, we can set the `opacity` property when we instantiate the shape, or we can use the `opacity()` method. - -Shapes can have an opacity value between 0 and 1, where 0 is fully transparent, and 1 is fully opaque. Unless otherwise specified, all shapes are defaulted with an opacity value of 1. - -Instructions: Mouseover the pentagon to change its opacity. - -{% iframe /downloads/code/styling/Opacity.html %} - +title: Opacity Tutorial +--- + +To set a shape opacity with Konva, we can set the `opacity` property when we instantiate the shape, or we can use the `opacity()` method. + +Shapes can have an opacity value between 0 and 1, where 0 is fully transparent, and 1 is fully opaque. Unless otherwise specified, all shapes are defaulted with an opacity value of 1. + +Instructions: Mouseover the pentagon to change its opacity. + +{% iframe /downloads/code/styling/Opacity.html %} + {% include_code Konva Opacity Demo styling/Opacity.html %} \ No newline at end of file diff --git a/source/docs/styling/Shadow.md b/source/docs/styling/Shadow.md index e096735ea..d9d997750 100644 --- a/source/docs/styling/Shadow.md +++ b/source/docs/styling/Shadow.md @@ -1,11 +1,11 @@ -title: Shadows Tutorial ---- - -To apply shadows with Konva, we can set the `shadowColor`, `shadowOffset`, `shadowBlur`, and `shadowOpacity` properties when we instantiate a shape. - -We can adjust the shadow properties after instantiation by using the `shadowColor()`, `shadowOffset()`, `shadowBlur()`, and `shadowOpacity()` methods. - - -{% iframe /downloads/code/styling/Shadow.html %} - +title: Shadows Tutorial +--- + +To apply shadows with Konva, we can set the `shadowColor`, `shadowOffset`, `shadowBlur`, and `shadowOpacity` properties when we instantiate a shape. + +We can adjust the shadow properties after instantiation by using the `shadowColor()`, `shadowOffset()`, `shadowBlur()`, and `shadowOpacity()` methods. + + +{% iframe /downloads/code/styling/Shadow.html %} + {% include_code Konva Shadows Demo styling/Shadow.html %} \ No newline at end of file diff --git a/source/docs/styling/Stroke.md b/source/docs/styling/Stroke.md index 87d560a8c..1b32d47cc 100644 --- a/source/docs/styling/Stroke.md +++ b/source/docs/styling/Stroke.md @@ -1,10 +1,10 @@ -title: Set Shape Stroke Color and Width Tutorial ---- - -To set a shape stroke and stroke width with Konva, we can set the `stroke` and `strokeWidth` properties when we instantiate a shape, or we can use the `stroke()` and `strokeWidth()` methods. - -Instructions: Mouseover the pentagon to change its stroke color and width. - -{% iframe /downloads/code/styling/Stroke.html %} - +title: Set Shape Stroke Color and Width Tutorial +--- + +To set a shape stroke and stroke width with Konva, we can set the `stroke` and `strokeWidth` properties when we instantiate a shape, or we can use the `stroke()` and `strokeWidth()` methods. + +Instructions: Mouseover the pentagon to change its stroke color and width. + +{% iframe /downloads/code/styling/Stroke.html %} + {% include_code Konva Stroke Demo styling/Stroke.html %} \ No newline at end of file diff --git a/source/docs/support.md b/source/docs/support.md index 7707fbf26..abdb0cb87 100644 --- a/source/docs/support.md +++ b/source/docs/support.md @@ -1,9 +1,9 @@ -title: Help ---- - -* Join [Gittip Chat](https://gitter.im/konvajs/konva) -* Ask your question on [StackOverflow](http://stackoverflow.com/questions/tagged/konvajs) -* If you found a bug add request to [Issues Page](https://github.com/konvajs/konva/issues) -* If you have something interesting use Twitter `#konvajs` hashtag -* Visit [Roadmap](https://github.com/konvajs/konva/wiki) and [Changelog](https://github.com/konvajs/konva/blob/master/CHANGELOG.md) +title: Help +--- + +* Join [Gittip Chat](https://gitter.im/konvajs/konva) +* Ask your question on [StackOverflow](http://stackoverflow.com/questions/tagged/konvajs) +* If you found a bug add request to [Issues Page](https://github.com/konvajs/konva/issues) +* If you have something interesting use Twitter `#konvajs` hashtag +* Visit [Roadmap](https://github.com/konvajs/konva/wiki) and [Changelog](https://github.com/konvajs/konva/blob/master/CHANGELOG.md) * Do you have really complicated issue or do you need help with implementing a huge project? As a maintainer I am availabe to help you as a freelancer. Just ping me somewhere in [chat](https://gitter.im/konvajs/konva), [twitter](https://twitter.com/lavrton) or find my email in my [github profile](https://github.com/lavrton). \ No newline at end of file diff --git a/source/docs/tools.md b/source/docs/tools.md index b9d694223..d946dad34 100644 --- a/source/docs/tools.md +++ b/source/docs/tools.md @@ -1,7 +1,7 @@ -title: Konva.js Tools and Plugins ---- - -* [Konva + Backbone](https://github.com/slash-system/backbone.konvaview) -* [Konva + React](https://github.com/olimsaidov/react-konva/) -* [Konva + Knockout](https://github.com/mcintyre321/knockout-konva) -* [Typescript definitions](https://github.com/konvajs/konva/blob/master/resources/konva.d.ts) +title: Konva.js Tools and Plugins +--- + +* [Konva + Backbone](https://github.com/slash-system/backbone.konvaview) +* [Konva + React](https://github.com/olimsaidov/react-konva/) +* [Konva + Knockout](https://github.com/mcintyre321/knockout-konva) +* [Typescript definitions](https://github.com/konvajs/konva/blob/master/resources/konva.d.ts) diff --git a/source/docs/tweens/All_Controls.md b/source/docs/tweens/All_Controls.md index 45413b6ae..5be8268c0 100644 --- a/source/docs/tweens/All_Controls.md +++ b/source/docs/tweens/All_Controls.md @@ -1,10 +1,10 @@ -title: All Tween Controls Tutorial ---- - -To play, pause, reverse, reset, finish, and seek tweens with Konva, -we can use the `play()`, `pause()`, `reverse()`, `reset()`, `finish()`, and `seek()` methods. -This tutorial demonstrates each control. - -{% iframe /downloads/code/tweens/All_Controls.html %} - -{% include_code All Tween Controls tweens/All_Controls.html %} +title: All Tween Controls Tutorial +--- + +To play, pause, reverse, reset, finish, and seek tweens with Konva, +we can use the `play()`, `pause()`, `reverse()`, `reset()`, `finish()`, and `seek()` methods. +This tutorial demonstrates each control. + +{% iframe /downloads/code/tweens/All_Controls.html %} + +{% include_code All Tween Controls tweens/All_Controls.html %} diff --git a/source/docs/tweens/All_Easings.md b/source/docs/tweens/All_Easings.md index 06207c291..9fdce0137 100644 --- a/source/docs/tweens/All_Easings.md +++ b/source/docs/tweens/All_Easings.md @@ -1,13 +1,13 @@ -title: More Easing Functions Tutorial ---- - -This tutorial demonstrates all of the easing function sets provided by Konva, -including `Linear`, `Ease`, `Back`, `Elastic`, `Bounce`, and `Strong`. - -For all available easings go to [Easings Documentation](http://konvajs.github.io/api/Konva.Easing.html). - -Instructions: Press "Play" to transition all of the text nodes. - -{% iframe /downloads/code/tweens/All_Easings.html 500 700 %} - -{% include_code More Easing Functions Demo tweens/All_Easings.html %} +title: More Easing Functions Tutorial +--- + +This tutorial demonstrates all of the easing function sets provided by Konva, +including `Linear`, `Ease`, `Back`, `Elastic`, `Bounce`, and `Strong`. + +For all available easings go to [Easings Documentation](http://konvajs.github.io/api/Konva.Easing.html). + +Instructions: Press "Play" to transition all of the text nodes. + +{% iframe /downloads/code/tweens/All_Easings.html 500 700 %} + +{% include_code More Easing Functions Demo tweens/All_Easings.html %} diff --git a/source/docs/tweens/Common_Easings.md b/source/docs/tweens/Common_Easings.md index a6d1deed0..b0e1bfae3 100644 --- a/source/docs/tweens/Common_Easings.md +++ b/source/docs/tweens/Common_Easings.md @@ -1,15 +1,15 @@ -title: Simple Easings Tutorial ---- - -To create a non linear easing tween with Konva, we can set the `easing` -property to an easing function. Other than `Konva.Easings.Linear`, -the other most common easings are `Konva.Easings.EaseIn`, -`Konva.Easings.EaseInOut`, and `Konva.Easings.EaseOut`. - -For all available easings go to [Easings Documentation](http://konvajs.github.io/api/Konva.Easing.html). - -Instructions: Mouseover or touchstart the boxes to tween them with different easing functions - -{% iframe /downloads/code/tweens/Common_Easing.html %} - -{% include_code Konva Simple Easings Demo tweens/Common_Easing.html %} +title: Simple Easings Tutorial +--- + +To create a non linear easing tween with Konva, we can set the `easing` +property to an easing function. Other than `Konva.Easings.Linear`, +the other most common easings are `Konva.Easings.EaseIn`, +`Konva.Easings.EaseInOut`, and `Konva.Easings.EaseOut`. + +For all available easings go to [Easings Documentation](http://konvajs.github.io/api/Konva.Easing.html). + +Instructions: Mouseover or touchstart the boxes to tween them with different easing functions + +{% iframe /downloads/code/tweens/Common_Easing.html %} + +{% include_code Konva Simple Easings Demo tweens/Common_Easing.html %} diff --git a/source/docs/tweens/Complex_Tweening.md b/source/docs/tweens/Complex_Tweening.md index e314a50c0..d4d9317ac 100644 --- a/source/docs/tweens/Complex_Tweening.md +++ b/source/docs/tweens/Complex_Tweening.md @@ -1,12 +1,12 @@ -title: Complex Tweening Tutorial ---- - -Also you can use [GreenSock Konva Plugin](https://github.com/konvajs/greensock-plugin) for tweens. - -GreenSock tweens are more powerfull than Konva's tween. - -Also demo demonstrate tweening `fillLinearGradientColorStops` property with usual GreenSock usage. - -{% iframe /downloads/code/tweens/Complex_Tweening.html %} - -{% include_code Konva Complex Tweening Demo tweens/Complex_Tweening.html %} +title: Complex Tweening Tutorial +--- + +Also you can use [GreenSock Konva Plugin](https://github.com/konvajs/greensock-plugin) for tweens. + +GreenSock tweens are more powerfull than Konva's tween. + +Also demo demonstrate tweening `fillLinearGradientColorStops` property with usual GreenSock usage. + +{% iframe /downloads/code/tweens/Complex_Tweening.html %} + +{% include_code Konva Complex Tweening Demo tweens/Complex_Tweening.html %} diff --git a/source/docs/tweens/Finish_Event.md b/source/docs/tweens/Finish_Event.md index 101b77b39..0af56b975 100644 --- a/source/docs/tweens/Finish_Event.md +++ b/source/docs/tweens/Finish_Event.md @@ -1,8 +1,8 @@ -title: Tween Finish Event Tutorial ---- - -To trigger a user defined function when the tween finishes with Konva, we can set the `onFinish` property. - -{% iframe /downloads/code/tweens/Finish_Event.html %} - -{% include_code Konva Tween Finish Event Demo tweens/Finish_Event.html %} +title: Tween Finish Event Tutorial +--- + +To trigger a user defined function when the tween finishes with Konva, we can set the `onFinish` property. + +{% iframe /downloads/code/tweens/Finish_Event.html %} + +{% include_code Konva Tween Finish Event Demo tweens/Finish_Event.html %} diff --git a/source/docs/tweens/Linear_Easing.md b/source/docs/tweens/Linear_Easing.md index 5881062d6..9441785ae 100644 --- a/source/docs/tweens/Linear_Easing.md +++ b/source/docs/tweens/Linear_Easing.md @@ -1,13 +1,13 @@ -title: Tweening Tutorial ---- - -To tween properties with Konva, we can instantiate a `Konva.Tween` object -and then start the tween by calling `play()`. Any numeric property of a `Shape`, -`Group`, `Layer`, or `Stage` can be transitioned, such as `x`, `y`, `rotation`, -`width`, `height`, `radius`, `strokeWidth`, `opacity`, `scaleX`, `offsetX`, etc. - -For a full list of attributes and methods, check out the [Konva.Tween documentation](http://konvajs.github.io/api/Konva.Tween.html). - -{% iframe /downloads/code/tweens/Linear_Easing.html %} - -{% include_code Konva Tweening Demo tweens/Linear_Easing.html %} +title: Tweening Tutorial +--- + +To tween properties with Konva, we can instantiate a `Konva.Tween` object +and then start the tween by calling `play()`. Any numeric property of a `Shape`, +`Group`, `Layer`, or `Stage` can be transitioned, such as `x`, `y`, `rotation`, +`width`, `height`, `radius`, `strokeWidth`, `opacity`, `scaleX`, `offsetX`, etc. + +For a full list of attributes and methods, check out the [Konva.Tween documentation](http://konvajs.github.io/api/Konva.Tween.html). + +{% iframe /downloads/code/tweens/Linear_Easing.html %} + +{% include_code Konva Tweening Demo tweens/Linear_Easing.html %} diff --git a/source/docs/tweens/Tween_Filter.md b/source/docs/tweens/Tween_Filter.md index 3894e4b06..b42c3bb12 100644 --- a/source/docs/tweens/Tween_Filter.md +++ b/source/docs/tweens/Tween_Filter.md @@ -1,11 +1,11 @@ -title: Tween Blur Filter Tutorial ---- - -To tween a filter using Konva, we can simply tween the properties associated with the filter. -In this tutorial, we'll tween the `blurRadius` property, which controls the amount of blur applied to the image. - -Instructions: mouseover the image to focus it. - -{% iframe /downloads/code/tweens/Tween_Filter.html %} - -{% include_code Konva Tween Blur Filter Demo tweens/Tween_Filter.html %} +title: Tween Blur Filter Tutorial +--- + +To tween a filter using Konva, we can simply tween the properties associated with the filter. +In this tutorial, we'll tween the `blurRadius` property, which controls the amount of blur applied to the image. + +Instructions: mouseover the image to focus it. + +{% iframe /downloads/code/tweens/Tween_Filter.html %} + +{% include_code Konva Tween Blur Filter Demo tweens/Tween_Filter.html %} diff --git a/source/downloads/code/animations/Moving.html b/source/downloads/code/animations/Moving.html index 5c5adb948..a8c352192 100644 --- a/source/downloads/code/animations/Moving.html +++ b/source/downloads/code/animations/Moving.html @@ -1,56 +1,56 @@ - - - - - - Konva Animate Position Demo - - - -
- - - + + + + + + Konva Animate Position Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/animations/Rotation.html b/source/downloads/code/animations/Rotation.html index 90a4e1bb9..cdeba8395 100644 --- a/source/downloads/code/animations/Rotation.html +++ b/source/downloads/code/animations/Rotation.html @@ -1,101 +1,101 @@ - - - - - - Konva Rotation Animation Demo - - - -
- - - + + + + + + Konva Rotation Animation Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/animations/Scaling.html b/source/downloads/code/animations/Scaling.html index 4102db8f1..6c5b4edec 100644 --- a/source/downloads/code/animations/Scaling.html +++ b/source/downloads/code/animations/Scaling.html @@ -1,97 +1,97 @@ - - - - - - Konva Scale Animation Demo - - - -
- - - + + + + + + Konva Scale Animation Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/animations/Stop_Animation.html b/source/downloads/code/animations/Stop_Animation.html index 194aff0d3..7b255b662 100644 --- a/source/downloads/code/animations/Stop_Animation.html +++ b/source/downloads/code/animations/Stop_Animation.html @@ -1,75 +1,75 @@ - - - - - - Konva Stop Animation Demo - - - -
-
- - -
- - - + + + + + + Konva Stop Animation Demo + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/data_&_serialization/Complex_Load.html b/source/downloads/code/data_&_serialization/Complex_Load.html index 170970e51..16cbb96fb 100644 --- a/source/downloads/code/data_&_serialization/Complex_Load.html +++ b/source/downloads/code/data_&_serialization/Complex_Load.html @@ -1,43 +1,43 @@ - - - - - - Konva Load Complex Stage Demo - - - -
- - - + + + + + + Konva Load Complex Stage Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/data_&_serialization/Serialize_a_Stage.html b/source/downloads/code/data_&_serialization/Serialize_a_Stage.html index 2466adf77..0f8d36b53 100644 --- a/source/downloads/code/data_&_serialization/Serialize_a_Stage.html +++ b/source/downloads/code/data_&_serialization/Serialize_a_Stage.html @@ -1,53 +1,53 @@ - - - - - - Konva Save Stage Demo - - - -
- - - + + + + + + Konva Save Stage Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/data_&_serialization/Simple_Load.html b/source/downloads/code/data_&_serialization/Simple_Load.html index 8ddbfbe1d..eac559ca3 100644 --- a/source/downloads/code/data_&_serialization/Simple_Load.html +++ b/source/downloads/code/data_&_serialization/Simple_Load.html @@ -1,26 +1,26 @@ - - - - - - Konva Simple Load Demo - - - -
- - - + + + + + + Konva Simple Load Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/data_&_serialization/Stage_Data_URL.html b/source/downloads/code/data_&_serialization/Stage_Data_URL.html index 60f1fd00d..50a5a3550 100644 --- a/source/downloads/code/data_&_serialization/Stage_Data_URL.html +++ b/source/downloads/code/data_&_serialization/Stage_Data_URL.html @@ -1,77 +1,77 @@ - - - - - - Konva Stage Data URL Demo - - - -
-
- -
- - - + + + + + + Konva Stage Data URL Demo + + + +
+
+ +
+ + + \ No newline at end of file diff --git a/source/downloads/code/drag_and_drop/Complex_Drag_and_Drop.html b/source/downloads/code/drag_and_drop/Complex_Drag_and_Drop.html index 8a93accf9..03532bc87 100644 --- a/source/downloads/code/drag_and_drop/Complex_Drag_and_Drop.html +++ b/source/downloads/code/drag_and_drop/Complex_Drag_and_Drop.html @@ -1,107 +1,107 @@ - - - - - - Konva Complex Drag and Drop Bounds Demo - - - -
- - - + + + + + + Konva Complex Drag and Drop Bounds Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/drag_and_drop/Drag_Events.html b/source/downloads/code/drag_and_drop/Drag_Events.html index db71f3a9e..d536554da 100644 --- a/source/downloads/code/drag_and_drop/Drag_Events.html +++ b/source/downloads/code/drag_and_drop/Drag_Events.html @@ -1,71 +1,71 @@ - - - - - - Konva Drag Events Demo - - - -
- - - + + + + + + Konva Drag Events Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/drag_and_drop/Drag_a_Group.html b/source/downloads/code/drag_and_drop/Drag_a_Group.html index 381216ab6..efdd7ed9b 100644 --- a/source/downloads/code/drag_and_drop/Drag_a_Group.html +++ b/source/downloads/code/drag_and_drop/Drag_a_Group.html @@ -1,60 +1,60 @@ - - - - - - Konva Drag and Drop a Group Demo - - - -
- - - + + + + + + Konva Drag and Drop a Group Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/drag_and_drop/Drag_a_Line.html b/source/downloads/code/drag_and_drop/Drag_a_Line.html index 88f0903a2..a2473f99b 100644 --- a/source/downloads/code/drag_and_drop/Drag_a_Line.html +++ b/source/downloads/code/drag_and_drop/Drag_a_Line.html @@ -1,52 +1,52 @@ - - - - - - Konva Drag and Drop a Line Demo - - - -
- - - + + + + + + Konva Drag and Drop a Line Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/drag_and_drop/Drag_a_Stage.html b/source/downloads/code/drag_and_drop/Drag_a_Stage.html index 1f25d9f53..f0418d6b8 100644 --- a/source/downloads/code/drag_and_drop/Drag_a_Stage.html +++ b/source/downloads/code/drag_and_drop/Drag_a_Stage.html @@ -1,48 +1,48 @@ - - - - - - Konva Drag and Drop the Stage Demo - - - -
- - - + + + + + + Konva Drag and Drop the Stage Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/drag_and_drop/Drag_an_Image.html b/source/downloads/code/drag_and_drop/Drag_an_Image.html index df9d69c02..3ddc93cdd 100644 --- a/source/downloads/code/drag_and_drop/Drag_an_Image.html +++ b/source/downloads/code/drag_and_drop/Drag_an_Image.html @@ -1,59 +1,59 @@ - - - - - - Konva Drag and Drop an Image Demo - - - -
- - - + + + + + + Konva Drag and Drop an Image Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/drag_and_drop/Drag_and_Drop.html b/source/downloads/code/drag_and_drop/Drag_and_Drop.html index 3db38c880..69405580d 100644 --- a/source/downloads/code/drag_and_drop/Drag_and_Drop.html +++ b/source/downloads/code/drag_and_drop/Drag_and_Drop.html @@ -1,56 +1,56 @@ - - - - - - Konva Drag and Drop Demo - - - -
- - - + + + + + + Konva Drag and Drop Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/drag_and_drop/Drop_Events.html b/source/downloads/code/drag_and_drop/Drop_Events.html index 216092cb9..0272cef3c 100644 --- a/source/downloads/code/drag_and_drop/Drop_Events.html +++ b/source/downloads/code/drag_and_drop/Drop_Events.html @@ -1,149 +1,149 @@ - - - - - - Konva Drop Events Demo - - - -
- - - + + + + + + Konva Drop Events Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/drag_and_drop/Simple_Drag_Bounds.html b/source/downloads/code/drag_and_drop/Simple_Drag_Bounds.html index ac14f4da0..1a2835d73 100644 --- a/source/downloads/code/drag_and_drop/Simple_Drag_Bounds.html +++ b/source/downloads/code/drag_and_drop/Simple_Drag_Bounds.html @@ -1,76 +1,76 @@ - - - - - - Konva Simple Drag Bounds Demo - - - -
- - - + + + + + + Konva Simple Drag Bounds Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/events/Binding_Events.html b/source/downloads/code/events/Binding_Events.html index 39b4e4a30..446c4b869 100644 --- a/source/downloads/code/events/Binding_Events.html +++ b/source/downloads/code/events/Binding_Events.html @@ -1,93 +1,93 @@ - - - - - - Konva Shape Events Demo - - - -
- - - + + + + + + Konva Shape Events Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/events/Cancel_Propagation.html b/source/downloads/code/events/Cancel_Propagation.html index e1472ff3a..d9f3b3c31 100644 --- a/source/downloads/code/events/Cancel_Propagation.html +++ b/source/downloads/code/events/Cancel_Propagation.html @@ -1,59 +1,59 @@ - - - - - - Konva Cancel Event Bubble Propagation Demo - - - -
- - - + + + + + + Konva Cancel Event Bubble Propagation Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/events/Custom_Hit_Region.html b/source/downloads/code/events/Custom_Hit_Region.html index 760ecea2d..778cd30ef 100644 --- a/source/downloads/code/events/Custom_Hit_Region.html +++ b/source/downloads/code/events/Custom_Hit_Region.html @@ -1,79 +1,79 @@ - - - - - - Konva Custom Hit Function Demo - - - -
- - - + + + + + + Konva Custom Hit Function Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/events/Desktop_and_Mobile.html b/source/downloads/code/events/Desktop_and_Mobile.html index 6aa6368a3..7b303f877 100644 --- a/source/downloads/code/events/Desktop_and_Mobile.html +++ b/source/downloads/code/events/Desktop_and_Mobile.html @@ -1,76 +1,76 @@ - - - - - - Konva Desktop and Mobile Events Support Demo - - - -
- - - + + + + + + Konva Desktop and Mobile Events Support Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/events/Event_Delegation.html b/source/downloads/code/events/Event_Delegation.html index f56f54f6d..650e8d848 100644 --- a/source/downloads/code/events/Event_Delegation.html +++ b/source/downloads/code/events/Event_Delegation.html @@ -1,54 +1,54 @@ - - - - - - Konva Event Delegation Demo - - - -
- - - + + + + + + Konva Event Delegation Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/events/Fire_Events.html b/source/downloads/code/events/Fire_Events.html index 659b2412f..41b92986d 100644 --- a/source/downloads/code/events/Fire_Events.html +++ b/source/downloads/code/events/Fire_Events.html @@ -1,58 +1,58 @@ - - - - - - Konva Fire Event Demo - - - -
- - - + + + + + + Konva Fire Event Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/events/Image_Events.html b/source/downloads/code/events/Image_Events.html index ee9c605d8..eceab7d5f 100644 --- a/source/downloads/code/events/Image_Events.html +++ b/source/downloads/code/events/Image_Events.html @@ -1,103 +1,103 @@ - - - - - - Konva Image Events Demo - - - -
- - - + + + + + + Konva Image Events Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/events/Listen_for_Events.html b/source/downloads/code/events/Listen_for_Events.html index 3b87a89eb..c76e7d970 100644 --- a/source/downloads/code/events/Listen_for_Events.html +++ b/source/downloads/code/events/Listen_for_Events.html @@ -1,89 +1,89 @@ - - - - - - Konva Listen or Don’t Listen to Events Demo - - - -
-
- - -
- - - + + + + + + Konva Listen or Don’t Listen to Events Demo + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/events/Mobile_Events.html b/source/downloads/code/events/Mobile_Events.html index 39024bd07..5d6dc68ae 100644 --- a/source/downloads/code/events/Mobile_Events.html +++ b/source/downloads/code/events/Mobile_Events.html @@ -1,84 +1,84 @@ - - - - - - Konva Mobile Touch Events Demo - - - -
- - - + + + + + + Konva Mobile Touch Events Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/events/Multi_Event.html b/source/downloads/code/events/Multi_Event.html index 175705c83..8d75afd09 100644 --- a/source/downloads/code/events/Multi_Event.html +++ b/source/downloads/code/events/Multi_Event.html @@ -1,67 +1,67 @@ - - - - - - Konva Multi-Event Binding Demo - - - -
- - - + + + + + + Konva Multi-Event Binding Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/events/Remove_Event.html b/source/downloads/code/events/Remove_Event.html index 2d933e845..9be089469 100644 --- a/source/downloads/code/events/Remove_Event.html +++ b/source/downloads/code/events/Remove_Event.html @@ -1,65 +1,65 @@ - - - - - - Konva Remove Event Listener Demo - - - -
-
- -
- - - + + + + + + Konva Remove Event Listener Demo + + + +
+
+ +
+ + + \ No newline at end of file diff --git a/source/downloads/code/events/Remove_by_Name.html b/source/downloads/code/events/Remove_by_Name.html index 72552a6b2..f7b624ee5 100644 --- a/source/downloads/code/events/Remove_by_Name.html +++ b/source/downloads/code/events/Remove_by_Name.html @@ -1,84 +1,84 @@ - - - - - - Konva Remove Event Listener by Name Demo - - - -
-
- - - -
- - - + + + + + + Konva Remove Event Listener by Name Demo + + + +
+
+ + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/events/Stage_Events.html b/source/downloads/code/events/Stage_Events.html index b5b98f353..df9a6ff61 100644 --- a/source/downloads/code/events/Stage_Events.html +++ b/source/downloads/code/events/Stage_Events.html @@ -1,53 +1,53 @@ - - - - - - Konva Stage Events Demo - - - -
- - - + + + + + + Konva Stage Events Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/filters/Blur.html b/source/downloads/code/filters/Blur.html index a2aa6bb26..c71ccfa2e 100644 --- a/source/downloads/code/filters/Blur.html +++ b/source/downloads/code/filters/Blur.html @@ -1,78 +1,78 @@ - - - - - - Konva Blur Image Demo - - - -
- - - - + + + + + + Konva Blur Image Demo + + + +
+ + + + \ No newline at end of file diff --git a/source/downloads/code/filters/Brighten.html b/source/downloads/code/filters/Brighten.html index 06ca393a3..5ec45a7a9 100644 --- a/source/downloads/code/filters/Brighten.html +++ b/source/downloads/code/filters/Brighten.html @@ -1,77 +1,77 @@ - - - - - - Konva Brighten Image Demo - - - -
- - - - + + + + + + Konva Brighten Image Demo + + + +
+ + + + \ No newline at end of file diff --git a/source/downloads/code/filters/Grayscale.html b/source/downloads/code/filters/Grayscale.html index 8dc2ba81b..53b40a788 100644 --- a/source/downloads/code/filters/Grayscale.html +++ b/source/downloads/code/filters/Grayscale.html @@ -1,66 +1,66 @@ - - - - - - Konva Grayscale Image Demo - - - -
- - - + + + + + + Konva Grayscale Image Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/filters/Invert.html b/source/downloads/code/filters/Invert.html index 9a5557c4f..a647f14d3 100644 --- a/source/downloads/code/filters/Invert.html +++ b/source/downloads/code/filters/Invert.html @@ -1,66 +1,66 @@ - - - - - - Konva Invert Image Demo - - - -
- - - + + + + + + Konva Invert Image Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/filters/Kaleidoscope.html b/source/downloads/code/filters/Kaleidoscope.html index a8e3eb9ca..39d089de0 100644 --- a/source/downloads/code/filters/Kaleidoscope.html +++ b/source/downloads/code/filters/Kaleidoscope.html @@ -1,78 +1,78 @@ - - - - - - Konva Kaleidoscope Image Demo - - - -
- - - - + + + + + + Konva Kaleidoscope Image Demo + + + +
+ + + + \ No newline at end of file diff --git a/source/downloads/code/filters/Multiple_Filters.html b/source/downloads/code/filters/Multiple_Filters.html index e61a7fc81..f2aa77d0f 100644 --- a/source/downloads/code/filters/Multiple_Filters.html +++ b/source/downloads/code/filters/Multiple_Filters.html @@ -1,78 +1,78 @@ - - - - - - Konva Multiple Filters Demo - - - -
- - - - + + + + + + Konva Multiple Filters Demo + + + +
+ + + + \ No newline at end of file diff --git a/source/downloads/code/groups_and_layers/Change_Containers.html b/source/downloads/code/groups_and_layers/Change_Containers.html index 1988d0935..c2013a825 100644 --- a/source/downloads/code/groups_and_layers/Change_Containers.html +++ b/source/downloads/code/groups_and_layers/Change_Containers.html @@ -1,103 +1,103 @@ - - - - - - Konva Move Shape to Another Container Demo - - - -
-
- - -
- - - + + + + + + Konva Move Shape to Another Container Demo + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/groups_and_layers/Clipping_Regions.html b/source/downloads/code/groups_and_layers/Clipping_Regions.html index dcd41fdf3..7286f6208 100644 --- a/source/downloads/code/groups_and_layers/Clipping_Regions.html +++ b/source/downloads/code/groups_and_layers/Clipping_Regions.html @@ -1,70 +1,70 @@ - - - - - - Konva Clipping Functions Demo - - - -
- - - + + + + + + Konva Clipping Functions Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/groups_and_layers/Groups.html b/source/downloads/code/groups_and_layers/Groups.html index 7c6c5ac6f..76a0e53ef 100644 --- a/source/downloads/code/groups_and_layers/Groups.html +++ b/source/downloads/code/groups_and_layers/Groups.html @@ -1,64 +1,64 @@ - - - - - - Konva Groups Demo - - - -
- - - + + + + + + Konva Groups Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/groups_and_layers/Layering.html b/source/downloads/code/groups_and_layers/Layering.html index a48755e02..dd89ee587 100644 --- a/source/downloads/code/groups_and_layers/Layering.html +++ b/source/downloads/code/groups_and_layers/Layering.html @@ -1,119 +1,119 @@ - - - - - - Konva Shape Layering Demo - - - -
-
- - - - - -
- - - + + + + + + Konva Shape Layering Demo + + + +
+
+ + + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/performance/BatchDraw.html b/source/downloads/code/performance/BatchDraw.html index 8ab21a815..896a2318d 100644 --- a/source/downloads/code/performance/BatchDraw.html +++ b/source/downloads/code/performance/BatchDraw.html @@ -1,54 +1,54 @@ - - - - - - Konva Batch Draw Demo - - - -
- - - - + + + + + + Konva Batch Draw Demo + + + +
+ + + + diff --git a/source/downloads/code/performance/Disable_Perfect_Draw.html b/source/downloads/code/performance/Disable_Perfect_Draw.html index e53ef6691..1b05660b4 100644 --- a/source/downloads/code/performance/Disable_Perfect_Draw.html +++ b/source/downloads/code/performance/Disable_Perfect_Draw.html @@ -1,78 +1,78 @@ - - - - - - Konva Disable Perfect Drawing Demo - - - -
- - - + + + + + + Konva Disable Perfect Drawing Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/performance/Layer_Management.html b/source/downloads/code/performance/Layer_Management.html index 9960c4863..b712b93c2 100644 --- a/source/downloads/code/performance/Layer_Management.html +++ b/source/downloads/code/performance/Layer_Management.html @@ -1,107 +1,107 @@ - - - - - - Konva Layer Management Demo - - - -
- - - - - + + + + + + Konva Layer Management Demo + + + +
+ + + + + diff --git a/source/downloads/code/performance/Listening_False.html b/source/downloads/code/performance/Listening_False.html index 9d2c2c990..c92a7430c 100644 --- a/source/downloads/code/performance/Listening_False.html +++ b/source/downloads/code/performance/Listening_False.html @@ -1,59 +1,59 @@ - - - - - - Konva Listening False Demo - - - -
- - - + + + + + + Konva Listening False Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/performance/Optimize_Animation.html b/source/downloads/code/performance/Optimize_Animation.html index 5b1e32076..02db1a826 100644 --- a/source/downloads/code/performance/Optimize_Animation.html +++ b/source/downloads/code/performance/Optimize_Animation.html @@ -1,65 +1,65 @@ - - - - - - Konva Optimize Animation Demo - - - -
- - - + + + + + + Konva Optimize Animation Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/performance/Optimize_Strokes.html b/source/downloads/code/performance/Optimize_Strokes.html index b8d9a72f2..50f4c116f 100644 --- a/source/downloads/code/performance/Optimize_Strokes.html +++ b/source/downloads/code/performance/Optimize_Strokes.html @@ -1,90 +1,90 @@ - - - - - - Konva Optimizing Strokes Demo - - - -
- - - + + + + + + Konva Optimizing Strokes Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/performance/Shape_Caching.html b/source/downloads/code/performance/Shape_Caching.html index 6378f1062..6733b9552 100644 --- a/source/downloads/code/performance/Shape_Caching.html +++ b/source/downloads/code/performance/Shape_Caching.html @@ -1,64 +1,64 @@ - - - - - - Konva Shape Caching Demo - - - -
- - - - + + + + + + Konva Shape Caching Demo + + + +
+ + + + diff --git a/source/downloads/code/performance/Shape_Redraw.html b/source/downloads/code/performance/Shape_Redraw.html index 759eeec4c..7c713aba0 100644 --- a/source/downloads/code/performance/Shape_Redraw.html +++ b/source/downloads/code/performance/Shape_Redraw.html @@ -1,67 +1,67 @@ - - - - - - Konva Shape Redraw Demo - - - -
- - - + + + + + + Konva Shape Redraw Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/10000_Shapes_With_Tooltip.html b/source/downloads/code/sandbox/10000_Shapes_With_Tooltip.html index 56239944f..db94cca98 100644 --- a/source/downloads/code/sandbox/10000_Shapes_With_Tooltip.html +++ b/source/downloads/code/sandbox/10000_Shapes_With_Tooltip.html @@ -1,85 +1,85 @@ - - - - - - Konva 10,000 Shapes with Tooltips Stress Test Demo - - - -
- - - + + + + + + Konva 10,000 Shapes with Tooltips Stress Test Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/20000_Nodes.html b/source/downloads/code/sandbox/20000_Nodes.html index 80ee4c4c5..f8e05e648 100644 --- a/source/downloads/code/sandbox/20000_Nodes.html +++ b/source/downloads/code/sandbox/20000_Nodes.html @@ -1,145 +1,145 @@ - - - - - - Konva Interactive Scatter Plot with 20,000 Nodes Demo - - - -
- - - + + + + + + Konva Interactive Scatter Plot with 20,000 Nodes Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Animals_on_the_Beach_Game.html b/source/downloads/code/sandbox/Animals_on_the_Beach_Game.html index 33d3d7206..36a9000f4 100644 --- a/source/downloads/code/sandbox/Animals_on_the_Beach_Game.html +++ b/source/downloads/code/sandbox/Animals_on_the_Beach_Game.html @@ -1,221 +1,221 @@ - - - - - - Konva Animals on the Beach Game Demo - - - -
- - - + + + + + + Konva Animals on the Beach Game Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Animation_Stress_Test.html b/source/downloads/code/sandbox/Animation_Stress_Test.html index 46a43fba2..b2f56309a 100644 --- a/source/downloads/code/sandbox/Animation_Stress_Test.html +++ b/source/downloads/code/sandbox/Animation_Stress_Test.html @@ -1,88 +1,88 @@ - - - - - - Konva Animation Stress Test Demo - - - -
- - - + + + + + + Konva Animation Stress Test Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Drag_And_Drop_Multiple_Shapes.html b/source/downloads/code/sandbox/Drag_And_Drop_Multiple_Shapes.html index 16b560c12..db37ebd1f 100644 --- a/source/downloads/code/sandbox/Drag_And_Drop_Multiple_Shapes.html +++ b/source/downloads/code/sandbox/Drag_And_Drop_Multiple_Shapes.html @@ -1,76 +1,76 @@ - - - - - - Konva Drag and Drop Multiple Shapes Demo - - - -
- - - + + + + + + Konva Drag and Drop Multiple Shapes Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Drag_And_Drop_Stress_Test.html b/source/downloads/code/sandbox/Drag_And_Drop_Stress_Test.html index 083eb1873..a40f4e9ea 100644 --- a/source/downloads/code/sandbox/Drag_And_Drop_Stress_Test.html +++ b/source/downloads/code/sandbox/Drag_And_Drop_Stress_Test.html @@ -1,83 +1,83 @@ - - - - - - Konva Drag and Drop Stress Test with 10,000 Shapes Demo - - - -
- - - + + + + + + Konva Drag and Drop Stress Test with 10,000 Shapes Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Elastic_Stars.html b/source/downloads/code/sandbox/Elastic_Stars.html index 172102bb6..51017effc 100644 --- a/source/downloads/code/sandbox/Elastic_Stars.html +++ b/source/downloads/code/sandbox/Elastic_Stars.html @@ -1,119 +1,119 @@ - - - - - - Konva Elastic Stars Demo - - - -
- - - + + + + + + Konva Elastic Stars Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Expand_Image_On_Hover.html b/source/downloads/code/sandbox/Expand_Image_On_Hover.html index 926347136..652245152 100644 --- a/source/downloads/code/sandbox/Expand_Image_On_Hover.html +++ b/source/downloads/code/sandbox/Expand_Image_On_Hover.html @@ -1,94 +1,94 @@ - - - - - - Konva Expand Image on Hover Demo - - - -
- - - + + + + + + Konva Expand Image on Hover Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Free_Drawing.html b/source/downloads/code/sandbox/Free_Drawing.html index d46250005..46a0d4012 100644 --- a/source/downloads/code/sandbox/Free_Drawing.html +++ b/source/downloads/code/sandbox/Free_Drawing.html @@ -1,123 +1,123 @@ - - - - - - Konva Free Drawing Demo - - - - Tool: - -
- - - - + + + + + + Konva Free Drawing Demo + + + + Tool: + +
+ + + + diff --git a/source/downloads/code/sandbox/Image_Border_Highlighting.html b/source/downloads/code/sandbox/Image_Border_Highlighting.html index edbde5045..49a551c07 100644 --- a/source/downloads/code/sandbox/Image_Border_Highlighting.html +++ b/source/downloads/code/sandbox/Image_Border_Highlighting.html @@ -1,88 +1,88 @@ - - - - - - Konva Image Border Highlighting Demo - - - -
- - - + + + + + + Konva Image Border Highlighting Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Image_Resize.html b/source/downloads/code/sandbox/Image_Resize.html index b65047d9e..78ae45068 100644 --- a/source/downloads/code/sandbox/Image_Resize.html +++ b/source/downloads/code/sandbox/Image_Resize.html @@ -1,169 +1,169 @@ - - - - - - Konva Image Resize Demo - - - -
- - - + + + + + + Konva Image Resize Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Interactive_Building_Map.html b/source/downloads/code/sandbox/Interactive_Building_Map.html index 012bde01c..f43671cde 100644 --- a/source/downloads/code/sandbox/Interactive_Building_Map.html +++ b/source/downloads/code/sandbox/Interactive_Building_Map.html @@ -1,143 +1,143 @@ - - - - - - Konva Interactive Building Map Demo - - - -
- - - + + + + + + Konva Interactive Building Map Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Modify_Curves_with_Anchor_Points.html b/source/downloads/code/sandbox/Modify_Curves_with_Anchor_Points.html index 823a6b043..0f7e7f094 100644 --- a/source/downloads/code/sandbox/Modify_Curves_with_Anchor_Points.html +++ b/source/downloads/code/sandbox/Modify_Curves_with_Anchor_Points.html @@ -1,158 +1,158 @@ - - - - - - Konva Modify Curves with Anchor Points Demo - - - -
- - - + + + + + + Konva Modify Curves with Anchor Points Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Modify_Shape_Color_on_Click.html b/source/downloads/code/sandbox/Modify_Shape_Color_on_Click.html index c02f45be0..71a73b2ab 100644 --- a/source/downloads/code/sandbox/Modify_Shape_Color_on_Click.html +++ b/source/downloads/code/sandbox/Modify_Shape_Color_on_Click.html @@ -1,68 +1,68 @@ - - - - - - Konva Modify Shape Color on Click Demo - - - -
- - - + + + + + + Konva Modify Shape Color on Click Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Multi-touch_Scale_Shape.html b/source/downloads/code/sandbox/Multi-touch_Scale_Shape.html index c485717eb..d2dd341d9 100644 --- a/source/downloads/code/sandbox/Multi-touch_Scale_Shape.html +++ b/source/downloads/code/sandbox/Multi-touch_Scale_Shape.html @@ -1,124 +1,124 @@ - - - - - - Konva Multi-touch Scale Shape Demo - - - -
- - - + + + + + + Konva Multi-touch Scale Shape Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Multi-touch_Scale_Stage.html b/source/downloads/code/sandbox/Multi-touch_Scale_Stage.html index 2b2a9c0ca..6b0380551 100644 --- a/source/downloads/code/sandbox/Multi-touch_Scale_Stage.html +++ b/source/downloads/code/sandbox/Multi-touch_Scale_Stage.html @@ -1,99 +1,99 @@ - - - - - - Konva Multi-touch Scale Stage Demo - - - -
- - - + + + + + + Konva Multi-touch Scale Stage Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Physics_Simulator.html b/source/downloads/code/sandbox/Physics_Simulator.html index fd24a8fd3..a3ff60925 100644 --- a/source/downloads/code/sandbox/Physics_Simulator.html +++ b/source/downloads/code/sandbox/Physics_Simulator.html @@ -1,340 +1,340 @@ - - - - - - Konva Physics Simulator Demo - - - -
- - - + + + + + + Konva Physics Simulator Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Planets_Image_Map.html b/source/downloads/code/sandbox/Planets_Image_Map.html index 63a0b6fe4..0bc2bdb31 100644 --- a/source/downloads/code/sandbox/Planets_Image_Map.html +++ b/source/downloads/code/sandbox/Planets_Image_Map.html @@ -1,137 +1,137 @@ - - - - - - Konva Planets Image Map Demo - - - -
-
- - -
- - - + + + + + + Konva Planets Image Map Demo + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Quantum_Squiggle.html b/source/downloads/code/sandbox/Quantum_Squiggle.html index 5c642b5e4..6f235ca8b 100644 --- a/source/downloads/code/sandbox/Quantum_Squiggle.html +++ b/source/downloads/code/sandbox/Quantum_Squiggle.html @@ -1,71 +1,71 @@ - - - - - - Konva Quantum Squiggle Demo - - - -
- - - + + + + + + Konva Quantum Squiggle Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Shape_Tango.html b/source/downloads/code/sandbox/Shape_Tango.html index be855f70e..527c7705f 100644 --- a/source/downloads/code/sandbox/Shape_Tango.html +++ b/source/downloads/code/sandbox/Shape_Tango.html @@ -1,87 +1,87 @@ - - - - - - Konva Shape Tango Demo - - - -
- - - - + + + + + + Konva Shape Tango Demo + + + +
+ + + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Shape_Tooltips.html b/source/downloads/code/sandbox/Shape_Tooltips.html index 9cd969374..231be8351 100644 --- a/source/downloads/code/sandbox/Shape_Tooltips.html +++ b/source/downloads/code/sandbox/Shape_Tooltips.html @@ -1,109 +1,109 @@ - - - - - - Konva Shape Tooltips Demo - - - -
- - - + + + + + + Konva Shape Tooltips Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Star_Spinner.html b/source/downloads/code/sandbox/Star_Spinner.html index 553e23adf..f9060ee4d 100644 --- a/source/downloads/code/sandbox/Star_Spinner.html +++ b/source/downloads/code/sandbox/Star_Spinner.html @@ -1,116 +1,116 @@ - - - - - - Konva Star Spinner Demo - - - -
- - - + + + + + + Konva Star Spinner Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Wheel_of_Fortune.html b/source/downloads/code/sandbox/Wheel_of_Fortune.html index 9d0716f18..ce3a953ac 100644 --- a/source/downloads/code/sandbox/Wheel_of_Fortune.html +++ b/source/downloads/code/sandbox/Wheel_of_Fortune.html @@ -1,264 +1,264 @@ - - - - - - Konva Wheel of Fortune Demo - - - -
- - - + + + + + + Konva Wheel of Fortune Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/sandbox/Zoom_Layer_On_Hover.html b/source/downloads/code/sandbox/Zoom_Layer_On_Hover.html index 1036407a8..e296e9ff6 100644 --- a/source/downloads/code/sandbox/Zoom_Layer_On_Hover.html +++ b/source/downloads/code/sandbox/Zoom_Layer_On_Hover.html @@ -1,75 +1,75 @@ - - - - - - Konva Zoom Image on Hover Demo - - - -
- - - + + + + + + Konva Zoom Image on Hover Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/selectors/Select_by_Name.html b/source/downloads/code/selectors/Select_by_Name.html index 9e3189bf6..b1fa6177b 100644 --- a/source/downloads/code/selectors/Select_by_Name.html +++ b/source/downloads/code/selectors/Select_by_Name.html @@ -1,116 +1,116 @@ - - - - - - Konva Select Shape by Name Demo - - - -
-
- -
- - - + + + + + + Konva Select Shape by Name Demo + + + +
+
+ +
+ + + \ No newline at end of file diff --git a/source/downloads/code/selectors/Select_by_Type.html b/source/downloads/code/selectors/Select_by_Type.html index fa86a92a6..64c8ea700 100644 --- a/source/downloads/code/selectors/Select_by_Type.html +++ b/source/downloads/code/selectors/Select_by_Type.html @@ -1,114 +1,114 @@ - - - - - - Konva Select Shape by Type Demo - - - -
-
- -
- - - + + + + + + Konva Select Shape by Type Demo + + + +
+
+ +
+ + + \ No newline at end of file diff --git a/source/downloads/code/selectors/Select_by_id.html b/source/downloads/code/selectors/Select_by_id.html index 4e9969d49..6ed3678bb 100644 --- a/source/downloads/code/selectors/Select_by_id.html +++ b/source/downloads/code/selectors/Select_by_id.html @@ -1,94 +1,94 @@ - - - - - - Konva Select Shape by id Demo - - - -
-
- -
- - - + + + + + + Konva Select Shape by id Demo + + + +
+
+ +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/Arc.html b/source/downloads/code/shapes/Arc.html index ace22a760..33e722e2c 100644 --- a/source/downloads/code/shapes/Arc.html +++ b/source/downloads/code/shapes/Arc.html @@ -1,49 +1,49 @@ - - - - - - Konva Arc Demo - - - -
- - - - + + + + + + Konva Arc Demo + + + +
+ + + + diff --git a/source/downloads/code/shapes/Arrow.html b/source/downloads/code/shapes/Arrow.html index 8eee02b50..3df8805c1 100644 --- a/source/downloads/code/shapes/Arrow.html +++ b/source/downloads/code/shapes/Arrow.html @@ -1,49 +1,49 @@ - - - - - - Konva Arrow Demo - - - -
- - - + + + + + + Konva Arrow Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/Circle.html b/source/downloads/code/shapes/Circle.html index 766157874..fa5cb0714 100644 --- a/source/downloads/code/shapes/Circle.html +++ b/source/downloads/code/shapes/Circle.html @@ -1,47 +1,47 @@ - - - - - - Konva Circle Demo - - - -
- - - + + + + + + Konva Circle Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/Custom.html b/source/downloads/code/shapes/Custom.html index 4cb486a94..4cf8c44e3 100644 --- a/source/downloads/code/shapes/Custom.html +++ b/source/downloads/code/shapes/Custom.html @@ -1,55 +1,55 @@ - - - - - - Konva Custom Shape Demo - - - -
- - - + + + + + + Konva Custom Shape Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/Ellipse.html b/source/downloads/code/shapes/Ellipse.html index 001513541..039845116 100644 --- a/source/downloads/code/shapes/Ellipse.html +++ b/source/downloads/code/shapes/Ellipse.html @@ -1,51 +1,51 @@ - - - - - - Konva Ellipse Demo - - - -
- - - + + + + + + Konva Ellipse Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/Image.html b/source/downloads/code/shapes/Image.html index da7d88d78..bff01c558 100644 --- a/source/downloads/code/shapes/Image.html +++ b/source/downloads/code/shapes/Image.html @@ -1,50 +1,50 @@ - - - - - - Konva Image Demo - - - -
- - - + + + + + + Konva Image Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/Label.html b/source/downloads/code/shapes/Label.html index 8a8dce3c8..8606b81ab 100644 --- a/source/downloads/code/shapes/Label.html +++ b/source/downloads/code/shapes/Label.html @@ -1,104 +1,104 @@ - - - - - - Konva Label Demo - - - -
- - - + + + + + + Konva Label Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/Line_-_Blob.html b/source/downloads/code/shapes/Line_-_Blob.html index 72a4e9283..55f8fdcd9 100644 --- a/source/downloads/code/shapes/Line_-_Blob.html +++ b/source/downloads/code/shapes/Line_-_Blob.html @@ -1,47 +1,47 @@ - - - - - - Konva Line Blob Demo - - - -
- - - + + + + + + Konva Line Blob Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/Line_-_Polygon.html b/source/downloads/code/shapes/Line_-_Polygon.html index d6a3d146c..ec679f72f 100644 --- a/source/downloads/code/shapes/Line_-_Polygon.html +++ b/source/downloads/code/shapes/Line_-_Polygon.html @@ -1,46 +1,46 @@ - - - - - - Konva Line Polygon Demo - - - -
- - - + + + + + + Konva Line Polygon Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/Line_-_Simple_line.html b/source/downloads/code/shapes/Line_-_Simple_line.html index 52c8f1e40..56d6d5ff6 100644 --- a/source/downloads/code/shapes/Line_-_Simple_line.html +++ b/source/downloads/code/shapes/Line_-_Simple_line.html @@ -1,93 +1,93 @@ - - - - - - Konva Simple Line Demo - - - -
- - - + + + + + + Konva Simple Line Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/Line_-_Spline.html b/source/downloads/code/shapes/Line_-_Spline.html index c33852a86..90db537c0 100644 --- a/source/downloads/code/shapes/Line_-_Spline.html +++ b/source/downloads/code/shapes/Line_-_Spline.html @@ -1,97 +1,97 @@ - - - - - - Konva Line Spline Demo - - - -
- - - + + + + + + Konva Line Spline Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/Path.html b/source/downloads/code/shapes/Path.html index 6f014ae10..3015a19ac 100644 --- a/source/downloads/code/shapes/Path.html +++ b/source/downloads/code/shapes/Path.html @@ -1,46 +1,46 @@ - - - - - - Konva Path Demo - - - -
- - - + + + + + + Konva Path Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/RegularPolygon.html b/source/downloads/code/shapes/RegularPolygon.html index d01d11f1b..4d90e339c 100644 --- a/source/downloads/code/shapes/RegularPolygon.html +++ b/source/downloads/code/shapes/RegularPolygon.html @@ -1,44 +1,44 @@ - - - - - - Konva RegularPolygon Demo - - - -
- - - + + + + + + Konva RegularPolygon Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/Ring.html b/source/downloads/code/shapes/Ring.html index 802caedfe..e311ee7b2 100644 --- a/source/downloads/code/shapes/Ring.html +++ b/source/downloads/code/shapes/Ring.html @@ -1,48 +1,48 @@ - - - - - - Konva Ring Demo - - - -
- - - - + + + + + + Konva Ring Demo + + + +
+ + + + diff --git a/source/downloads/code/shapes/Sprite.html b/source/downloads/code/shapes/Sprite.html index 2a892c447..d340aaff5 100644 --- a/source/downloads/code/shapes/Sprite.html +++ b/source/downloads/code/shapes/Sprite.html @@ -1,90 +1,90 @@ - - - - - - Konva Sprite Demo - - - -
- - - - + + + + + + Konva Sprite Demo + + + +
+ + + + \ No newline at end of file diff --git a/source/downloads/code/shapes/Star.html b/source/downloads/code/shapes/Star.html index 9b9c59b2f..48875137c 100644 --- a/source/downloads/code/shapes/Star.html +++ b/source/downloads/code/shapes/Star.html @@ -1,46 +1,46 @@ - - - - - - Konva Star Demo - - - -
- - - + + + + + + Konva Star Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/Text.html b/source/downloads/code/shapes/Text.html index 0ed4d9df6..cf374bd28 100644 --- a/source/downloads/code/shapes/Text.html +++ b/source/downloads/code/shapes/Text.html @@ -1,81 +1,81 @@ - - - - - - Konva Text Demo - - - -
- - - + + + + + + Konva Text Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/TextPath.html b/source/downloads/code/shapes/TextPath.html index 52d13246f..33240a45b 100644 --- a/source/downloads/code/shapes/TextPath.html +++ b/source/downloads/code/shapes/TextPath.html @@ -1,47 +1,47 @@ - - - - - - Konva TextPath Demo - - - -
- - - - + + + + + + Konva TextPath Demo + + + +
+ + + + diff --git a/source/downloads/code/shapes/Wedge.html b/source/downloads/code/shapes/Wedge.html index e15965cbd..088b24d1c 100644 --- a/source/downloads/code/shapes/Wedge.html +++ b/source/downloads/code/shapes/Wedge.html @@ -1,49 +1,49 @@ - - - - - - Konva Wedge Demo - - - -
- - - + + + + + + Konva Wedge Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/shapes/rect.html b/source/downloads/code/shapes/rect.html index fde7b38fe..59269385c 100644 --- a/source/downloads/code/shapes/rect.html +++ b/source/downloads/code/shapes/rect.html @@ -1,48 +1,48 @@ - - - - - - Konva Rect Demo - - - -
- - - + + + + + + Konva Rect Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/styling/Fill.html b/source/downloads/code/styling/Fill.html index b4aa923ef..948fc6585 100644 --- a/source/downloads/code/styling/Fill.html +++ b/source/downloads/code/styling/Fill.html @@ -1,175 +1,175 @@ - - - - - - Konva Fill Demo - - - -
- - - + + + + + + Konva Fill Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/styling/Hide_and_Show.html b/source/downloads/code/styling/Hide_and_Show.html index ce7a7d155..9a1e6298e 100644 --- a/source/downloads/code/styling/Hide_and_Show.html +++ b/source/downloads/code/styling/Hide_and_Show.html @@ -1,76 +1,76 @@ - - - - - - Konva Hide and Show Demo - - - -
-
- - -
- - - + + + + + + Konva Hide and Show Demo + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/styling/Line_Join.html b/source/downloads/code/styling/Line_Join.html index 63bd19af9..22af10d7c 100644 --- a/source/downloads/code/styling/Line_Join.html +++ b/source/downloads/code/styling/Line_Join.html @@ -1,58 +1,58 @@ - - - - - - Konva Line Join Demo - - - -
- - - + + + + + + Konva Line Join Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/styling/Opacity.html b/source/downloads/code/styling/Opacity.html index 77b1cc6b4..a789decac 100644 --- a/source/downloads/code/styling/Opacity.html +++ b/source/downloads/code/styling/Opacity.html @@ -1,58 +1,58 @@ - - - - - - Konva Opacity Demo - - - -
- - - + + + + + + Konva Opacity Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/styling/Shadow.html b/source/downloads/code/styling/Shadow.html index b524fde75..b9f2a8e88 100644 --- a/source/downloads/code/styling/Shadow.html +++ b/source/downloads/code/styling/Shadow.html @@ -1,78 +1,78 @@ - - - - - - Konva Shadow Demo - - - -
- - - + + + + + + Konva Shadow Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/styling/Stroke.html b/source/downloads/code/styling/Stroke.html index 65a1f480e..15cef8892 100644 --- a/source/downloads/code/styling/Stroke.html +++ b/source/downloads/code/styling/Stroke.html @@ -1,58 +1,58 @@ - - - - - - Konva Stroke Demo - - - -
- - - + + + + + + Konva Stroke Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/tweens/All_Controls.html b/source/downloads/code/tweens/All_Controls.html index 6a12ebc8c..c5a8c8f6a 100644 --- a/source/downloads/code/tweens/All_Controls.html +++ b/source/downloads/code/tweens/All_Controls.html @@ -1,112 +1,112 @@ - - - - - - Konva All Controls Demo - - - -
-
- - - - - - - -
- - - + + + + + + Konva All Controls Demo + + + +
+
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/tweens/All_Easings.html b/source/downloads/code/tweens/All_Easings.html index 0f31ca008..b80eaee48 100644 --- a/source/downloads/code/tweens/All_Easings.html +++ b/source/downloads/code/tweens/All_Easings.html @@ -1,116 +1,116 @@ - - - - - - Konva All Easings Demo - - - -
-
- - - -
- - - + + + + + + Konva All Easings Demo + + + +
+
+ + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/tweens/Common_Easing.html b/source/downloads/code/tweens/Common_Easing.html index 1ad0dfa5b..a166df7de 100644 --- a/source/downloads/code/tweens/Common_Easing.html +++ b/source/downloads/code/tweens/Common_Easing.html @@ -1,113 +1,113 @@ - - - - - - Konva Common Easing Demo - - - -
- - - + + + + + + Konva Common Easing Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/tweens/Complex_Tweening.html b/source/downloads/code/tweens/Complex_Tweening.html index c5b0e4bc5..fef8a6089 100644 --- a/source/downloads/code/tweens/Complex_Tweening.html +++ b/source/downloads/code/tweens/Complex_Tweening.html @@ -1,134 +1,134 @@ - - - - - - - - - - Konva Complex Tweening Demo - - - -
- - - + + + + + + + + + + Konva Complex Tweening Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/tweens/Finish_Event.html b/source/downloads/code/tweens/Finish_Event.html index 848794dec..367acbb45 100644 --- a/source/downloads/code/tweens/Finish_Event.html +++ b/source/downloads/code/tweens/Finish_Event.html @@ -1,77 +1,77 @@ - - - - - - Konva Finish Event Demo - - - -
- - - + + + + + + Konva Finish Event Demo + + + +
+ + + \ No newline at end of file diff --git a/source/downloads/code/tweens/Tween_Filter.html b/source/downloads/code/tweens/Tween_Filter.html index 73ed58093..8c48499c5 100644 --- a/source/downloads/code/tweens/Tween_Filter.html +++ b/source/downloads/code/tweens/Tween_Filter.html @@ -1,66 +1,66 @@ - - - - - - Konva Tween Filter Demo - - - -
- - - + + + + + + Konva Tween Filter Demo + + + +
+ + + \ No newline at end of file diff --git a/source/index.jade b/source/index.jade index 4ed4cd007..deb6ce99e 100644 --- a/source/index.jade +++ b/source/index.jade @@ -1,43 +1,43 @@ -layout: index -subtitle: html5 2d canvas framework -description: Konva is a fast, simple & powerful 2d canvas framework. -comments: false ---- -.intro-wrap - .outer - h2.intro-features Features - ul.features - li Built-in in support for HDPI devices with pixel ratio optimizations for sharp text and shapes - li Object Oriented API - li Node nesting and event bubbling - li High performance event detection via color map hashing - li Layering support - li Node caching to improve draw performance - li Nodes can be converted into data URLs, image data, or image objects - li Animation support - li Tween support - li Drag and drop with configurable constraints and bounds - li Filters - li Ready to use shapes including rectangles, circles, images, text, lines, polygons, SVG paths, and more - li Custom shapes - li Event driven architecture which enables developers to subscribe to attr change events, layer draw events, and more - li Serialization & de-serialization - li Selector support e.g. stage.get('#foo') and layer.get('.bar'); - li Desktop and mobile events - li AMD support - li Custom hit regions - li and more... - h2.intro-features Demo - p.codepen(data-height='500', data-theme-id='11714', data-slug-hash='myBPGo', data-default-tab='result', data-user='lavrton') - | See the Pen - a(href='http://codepen.io/lavrton/pen/myBPGo/') KonvaJS Demo - | by Anton Lavrenov ( - a(href='http://codepen.io/lavrton') @lavrton - | ) on - a(href='http://codepen.io') CodePen - | . - script(async='', src='//assets.codepen.io/assets/embed/ei.js') - - .outer - #intro-btn-wrap - a#intro-btn(href="/docs/") Get Started +layout: index +subtitle: html5 2d canvas framework +description: Konva is a fast, simple & powerful 2d canvas framework. +comments: false +--- +.intro-wrap + .outer + h2.intro-features Features + ul.features + li Built-in in support for HDPI devices with pixel ratio optimizations for sharp text and shapes + li Object Oriented API + li Node nesting and event bubbling + li High performance event detection via color map hashing + li Layering support + li Node caching to improve draw performance + li Nodes can be converted into data URLs, image data, or image objects + li Animation support + li Tween support + li Drag and drop with configurable constraints and bounds + li Filters + li Ready to use shapes including rectangles, circles, images, text, lines, polygons, SVG paths, and more + li Custom shapes + li Event driven architecture which enables developers to subscribe to attr change events, layer draw events, and more + li Serialization & de-serialization + li Selector support e.g. stage.get('#foo') and layer.get('.bar'); + li Desktop and mobile events + li AMD support + li Custom hit regions + li and more... + h2.intro-features Demo + p.codepen(data-height='500', data-theme-id='11714', data-slug-hash='myBPGo', data-default-tab='result', data-user='lavrton') + | See the Pen + a(href='http://codepen.io/lavrton/pen/myBPGo/') KonvaJS Demo + | by Anton Lavrenov ( + a(href='http://codepen.io/lavrton') @lavrton + | ) on + a(href='http://codepen.io') CodePen + | . + script(async='', src='//assets.codepen.io/assets/embed/ei.js') + + .outer + #intro-btn-wrap + a#intro-btn(href="/docs/") Get Started diff --git a/source/robots.txt b/source/robots.txt index 9177728ea..96d2463bf 100644 --- a/source/robots.txt +++ b/source/robots.txt @@ -1,3 +1,3 @@ -User-agent: * -Sitemap: /sitemap.xml +User-agent: * +Sitemap: /sitemap.xml Disallow: /docs/plugins/filter-flow.html \ No newline at end of file diff --git a/themes/hexo3/_config.yml b/themes/hexo3/_config.yml index 3a950ba04..2c89f529f 100644 --- a/themes/hexo3/_config.yml +++ b/themes/hexo3/_config.yml @@ -1,142 +1,142 @@ -menu: - Tutorials: /docs/ - Demos: /docs/sandbox - API docs: /api/Konva.html - Support: /docs/support.html - -doc_sidebar: - Getting Started: - Intro: index.html - Overview: overview.html - Support: support.html - Tools : tools.html - Shapes: - Rect : shapes/Rect.html - Circle : shapes/Circle.html - Ellipse : shapes/Ellipse.html - Wedge : shapes/Wedge.html - Line - Simple Line : shapes/Line_-_Simple_Line.html - Line - Polygon : shapes/Line_-_Polygon.html - Line - Spline : shapes/Line_-_Spline.html - Line - Blob : shapes/Line_-_Blob.html - Sprite : shapes/Sprite.html - Image : shapes/Image.html - Text : shapes/Text.html - TextPath : shapes/TextPath.html - Star : shapes/Star.html - Ring : shapes/Ring.html - Arc : shapes/Arc.html - Label : shapes/Label.html - Path : shapes/Path.html - RegularPolygon : shapes/RegularPolygon.html - Arrow : shapes/Arrow.html - Custom : shapes/Custom.html - Styling: - Fill : styling/Fill.html - Stroke : styling/Stroke.html - Opacity : styling/Opacity.html - Shadow : styling/Shadow.html - Line Join : styling/Line_Join.html - Hide and Show : styling/Hide_and_Show.html - Events: - Binding Events : events/Binding_Events.html - Image Events : events/Image_Events.html - Mobile Events : events/Mobile_Events.html - Multi Event : events/Multi_Event.html - Desktop and Mobile : events/Desktop_and_Mobile.html - Remove Event : events/Remove_Event.html - Remove by Name : events/Remove_by_Name.html - Custom Hit Region : events/Custom_Hit_Region.html - Listen for Events : events/Listen_for_Events.html - Cancel Propagation : events/Cancel_Propagation.html - Event Delegation : events/Event_Delegation.html - Fire Events : events/Fire_Events.html - Stage Events : events/Stage_Events.html - Drag and Drop: - Drag and Drop : drag_and_drop/Drag_and_Drop.html - Drag an Image : drag_and_drop/Drag_an_Image.html - Drag a Group : drag_and_drop/Drag_a_Group.html - Drag a Line : drag_and_drop/Drag_a_Line.html - Drag a Stage : drag_and_drop/Drag_a_Stage.html - Drag Events : drag_and_drop/Drag_Events.html - Simple Drag Bounds : drag_and_drop/Simple_Drag_Bounds.html - Complex Drag and Drop : drag_and_drop/Complex_Drag_and_Drop.html - Drop Events : drag_and_drop/Drop_Events.html - Groups and Layers: - Groups : groups_and_layers/Groups.html - Layering : groups_and_layers/Layering.html - Change Containers : groups_and_layers/Change_Containers.html - Clipping Regions : groups_and_layers/Clipping_Regions.html - Filters: - RGBA : filters/RGBA.html - Invert : filters/Invert.html - Grayscale : filters/Grayscale.html - Brighten : filters/Brighten.html - Kaleidoscope : filters/Kaleidoscope.html - Blur : filters/Blur.html - Multiple Filters : filters/Multiple_Filters.html - Tweens: - Linear Easing : tweens/Linear_Easing.html - Common Easings : tweens/Common_Easings.html - All Easings : tweens/All_Easings.html - Finish Event : tweens/Finish_Event.html - All Controls : tweens/All_Controls.html - Tween Filter : tweens/Tween_Filter.html - Complex Tweening : tweens/Complex_Tweening.html - Animations: - Create an Animation : animations/Create_an_Animation.html - Moving : animations/Moving.html - Rotation : animations/Rotation.html - Scaling : animations/Scaling.html - Stop Animation : animations/Stop_Animation.html - Selectors: - Select by id : selectors/Select_by_id.html - Select by Type : selectors/Select_by_Type.html - Select by Name : selectors/Select_by_Name.html - Data & Serialization: - Serialize a Stage : data_&_serialization/Serialize_a_Stage.html - Simple Load : data_&_serialization/Simple_Load.html - Complex Load : data_&_serialization/Complex_Load.html - Stage Data URL : data_&_serialization/Stage_Data_URL.html - Performance: - Layer Management : performance/Layer_Management.html - Batch Draw : performance/Batch_Draw.html - Shape Caching : performance/Shape_Caching.html - Optimize Animation : performance/Optimize_Animation.html - Optimize Strokes : performance/Optimize_Strokes.html - Shape Redraw : performance/Shape_Redraw.html - Disable Perfect Drawing : performance/Disable_Perfect_Draw.html - Listening False : performance/Listening_False.html - Avoid Memory Leaks : performance/Avoid_Memory_Leaks.html - All tips : performance/All_Performance_Tips.html - Demos: - Free Drawing : sandbox/Free_Drawing.html - Zoom Layer On hover : sandbox/Zoom_Layer_On_hover.html - Wheel of Fortune : sandbox/Wheel_of_Fortune.html - Quantum Squiggle : sandbox/Quantum_Squiggle.html - 20000 Nodes : sandbox/20000_Nodes.html - Elastic Stars : sandbox/Elastic_Stars.html - Shape Tango : sandbox/Shape_Tango.html - Multi-touch Scale Shape : sandbox/Multi-touch_Scale_Shape.html - Multi-touch Scale Stage : sandbox/Multi-touch_Scale_Stage.html - Interactive Building Map : sandbox/Interactive_Building_Map.html - Modify Curves with Anchor Points : sandbox/Modify_Curves_with_Anchor_Points.html - Drag and Drop Stress Test : sandbox/Drag_and_Drop_Stress_Test.html - Animals on the Beach Game : sandbox/Animals_on_the_Beach_Game.html - Animation Stress Test : sandbox/Animation_Stress_Test.html - 10000 Shapes with Tooltips : sandbox/10000_Shapes_with_Tooltip.html - Modify Shape Color on Click : sandbox/Modify_Shape_Color_on_Click.html - Physics Simulator : sandbox/Physics_Simulator.html - Expand Images on Hover : sandbox/Expand_Images_on_Hover.html - Planets Image Map : sandbox/Planets_Image_Map.html - Image Resize : sandbox/Image_Resize.html - Shape Tooltips : sandbox/Shape_Tooltips.html - Star Spiner : sandbox/Star_Spiner.html - Drag and Drop Multiple Shapes : sandbox/Drag_and_Drop_Multiple_Shapes.html - Image Border Highlighting : sandbox/Image_Border_Highlighting.html - -google_analytics: UA-54202824-2 -fb_admins: -swiftype_key: rRaQRFqx1DcWDDysdpg_ -twitter: lavrton -github: konvajs/konva +menu: + Tutorials: /docs/ + Demos: /docs/sandbox + API docs: /api/Konva.html + Support: /docs/support.html + +doc_sidebar: + Getting Started: + Intro: index.html + Overview: overview.html + Support: support.html + Tools : tools.html + Shapes: + Rect : shapes/Rect.html + Circle : shapes/Circle.html + Ellipse : shapes/Ellipse.html + Wedge : shapes/Wedge.html + Line - Simple Line : shapes/Line_-_Simple_Line.html + Line - Polygon : shapes/Line_-_Polygon.html + Line - Spline : shapes/Line_-_Spline.html + Line - Blob : shapes/Line_-_Blob.html + Sprite : shapes/Sprite.html + Image : shapes/Image.html + Text : shapes/Text.html + TextPath : shapes/TextPath.html + Star : shapes/Star.html + Ring : shapes/Ring.html + Arc : shapes/Arc.html + Label : shapes/Label.html + Path : shapes/Path.html + RegularPolygon : shapes/RegularPolygon.html + Arrow : shapes/Arrow.html + Custom : shapes/Custom.html + Styling: + Fill : styling/Fill.html + Stroke : styling/Stroke.html + Opacity : styling/Opacity.html + Shadow : styling/Shadow.html + Line Join : styling/Line_Join.html + Hide and Show : styling/Hide_and_Show.html + Events: + Binding Events : events/Binding_Events.html + Image Events : events/Image_Events.html + Mobile Events : events/Mobile_Events.html + Multi Event : events/Multi_Event.html + Desktop and Mobile : events/Desktop_and_Mobile.html + Remove Event : events/Remove_Event.html + Remove by Name : events/Remove_by_Name.html + Custom Hit Region : events/Custom_Hit_Region.html + Listen for Events : events/Listen_for_Events.html + Cancel Propagation : events/Cancel_Propagation.html + Event Delegation : events/Event_Delegation.html + Fire Events : events/Fire_Events.html + Stage Events : events/Stage_Events.html + Drag and Drop: + Drag and Drop : drag_and_drop/Drag_and_Drop.html + Drag an Image : drag_and_drop/Drag_an_Image.html + Drag a Group : drag_and_drop/Drag_a_Group.html + Drag a Line : drag_and_drop/Drag_a_Line.html + Drag a Stage : drag_and_drop/Drag_a_Stage.html + Drag Events : drag_and_drop/Drag_Events.html + Simple Drag Bounds : drag_and_drop/Simple_Drag_Bounds.html + Complex Drag and Drop : drag_and_drop/Complex_Drag_and_Drop.html + Drop Events : drag_and_drop/Drop_Events.html + Groups and Layers: + Groups : groups_and_layers/Groups.html + Layering : groups_and_layers/Layering.html + Change Containers : groups_and_layers/Change_Containers.html + Clipping Regions : groups_and_layers/Clipping_Regions.html + Filters: + RGBA : filters/RGBA.html + Invert : filters/Invert.html + Grayscale : filters/Grayscale.html + Brighten : filters/Brighten.html + Kaleidoscope : filters/Kaleidoscope.html + Blur : filters/Blur.html + Multiple Filters : filters/Multiple_Filters.html + Tweens: + Linear Easing : tweens/Linear_Easing.html + Common Easings : tweens/Common_Easings.html + All Easings : tweens/All_Easings.html + Finish Event : tweens/Finish_Event.html + All Controls : tweens/All_Controls.html + Tween Filter : tweens/Tween_Filter.html + Complex Tweening : tweens/Complex_Tweening.html + Animations: + Create an Animation : animations/Create_an_Animation.html + Moving : animations/Moving.html + Rotation : animations/Rotation.html + Scaling : animations/Scaling.html + Stop Animation : animations/Stop_Animation.html + Selectors: + Select by id : selectors/Select_by_id.html + Select by Type : selectors/Select_by_Type.html + Select by Name : selectors/Select_by_Name.html + Data & Serialization: + Serialize a Stage : data_&_serialization/Serialize_a_Stage.html + Simple Load : data_&_serialization/Simple_Load.html + Complex Load : data_&_serialization/Complex_Load.html + Stage Data URL : data_&_serialization/Stage_Data_URL.html + Performance: + Layer Management : performance/Layer_Management.html + Batch Draw : performance/Batch_Draw.html + Shape Caching : performance/Shape_Caching.html + Optimize Animation : performance/Optimize_Animation.html + Optimize Strokes : performance/Optimize_Strokes.html + Shape Redraw : performance/Shape_Redraw.html + Disable Perfect Drawing : performance/Disable_Perfect_Draw.html + Listening False : performance/Listening_False.html + Avoid Memory Leaks : performance/Avoid_Memory_Leaks.html + All tips : performance/All_Performance_Tips.html + Demos: + Free Drawing : sandbox/Free_Drawing.html + Zoom Layer On hover : sandbox/Zoom_Layer_On_hover.html + Wheel of Fortune : sandbox/Wheel_of_Fortune.html + Quantum Squiggle : sandbox/Quantum_Squiggle.html + 20000 Nodes : sandbox/20000_Nodes.html + Elastic Stars : sandbox/Elastic_Stars.html + Shape Tango : sandbox/Shape_Tango.html + Multi-touch Scale Shape : sandbox/Multi-touch_Scale_Shape.html + Multi-touch Scale Stage : sandbox/Multi-touch_Scale_Stage.html + Interactive Building Map : sandbox/Interactive_Building_Map.html + Modify Curves with Anchor Points : sandbox/Modify_Curves_with_Anchor_Points.html + Drag and Drop Stress Test : sandbox/Drag_and_Drop_Stress_Test.html + Animals on the Beach Game : sandbox/Animals_on_the_Beach_Game.html + Animation Stress Test : sandbox/Animation_Stress_Test.html + 10000 Shapes with Tooltips : sandbox/10000_Shapes_with_Tooltip.html + Modify Shape Color on Click : sandbox/Modify_Shape_Color_on_Click.html + Physics Simulator : sandbox/Physics_Simulator.html + Expand Images on Hover : sandbox/Expand_Images_on_Hover.html + Planets Image Map : sandbox/Planets_Image_Map.html + Image Resize : sandbox/Image_Resize.html + Shape Tooltips : sandbox/Shape_Tooltips.html + Star Spiner : sandbox/Star_Spiner.html + Drag and Drop Multiple Shapes : sandbox/Drag_and_Drop_Multiple_Shapes.html + Image Border Highlighting : sandbox/Image_Border_Highlighting.html + +google_analytics: UA-54202824-2 +fb_admins: +swiftype_key: rRaQRFqx1DcWDDysdpg_ +twitter: lavrton +github: konvajs/konva diff --git a/themes/hexo3/layout/_partial/after-footer.ejs b/themes/hexo3/layout/_partial/after-footer.ejs index 45490876f..01a155f16 100644 --- a/themes/hexo3/layout/_partial/after-footer.ejs +++ b/themes/hexo3/layout/_partial/after-footer.ejs @@ -1,36 +1,36 @@ -<% if (config.disqus_shortname){ %> - - -<% } %> - - - -<%- js('js/retina.min') %> -<%- js('js/script') %> - - - - +<% if (config.disqus_shortname){ %> + + +<% } %> + + + +<%- js('js/retina.min') %> +<%- js('js/script') %> + + + + diff --git a/themes/hexo3/layout/_partial/article.ejs b/themes/hexo3/layout/_partial/article.ejs index b729914fe..b4a8780e5 100644 --- a/themes/hexo3/layout/_partial/article.ejs +++ b/themes/hexo3/layout/_partial/article.ejs @@ -1,17 +1,17 @@ -
-
- <%- partial('post/title') %> - <%- partial('post/date') %> -
- <% if (full){ %> -
- <%- post.content %> -
- <% } %> - <% if (!index){ %> -
- <%- partial('post/share') %> -
- <%- partial('comment') %> - <% } %> +
+
+ <%- partial('post/title') %> + <%- partial('post/date') %> +
+ <% if (full){ %> +
+ <%- post.content %> +
+ <% } %> + <% if (!index){ %> +
+ <%- partial('post/share') %> +
+ <%- partial('comment') %> + <% } %>
\ No newline at end of file diff --git a/themes/hexo3/layout/_partial/comment.ejs b/themes/hexo3/layout/_partial/comment.ejs index 5d1b5e745..f8b3942e2 100644 --- a/themes/hexo3/layout/_partial/comment.ejs +++ b/themes/hexo3/layout/_partial/comment.ejs @@ -1,7 +1,7 @@ -<% if (page.comments && config.disqus_shortname){ %> -
-
- -
-
+<% if (page.comments && config.disqus_shortname){ %> +
+
+ +
+
<% } %> \ No newline at end of file diff --git a/themes/hexo3/layout/_partial/footer.ejs b/themes/hexo3/layout/_partial/footer.ejs index 3a2bb9441..334985c88 100644 --- a/themes/hexo3/layout/_partial/footer.ejs +++ b/themes/hexo3/layout/_partial/footer.ejs @@ -1,19 +1,19 @@ -