diff --git a/_config.yml b/_config.yml index f09b7c8b5..22b377846 100644 --- a/_config.yml +++ b/_config.yml @@ -9,7 +9,7 @@ language: en # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' -url: https://konvajs.github.io +url: https://konvajs.org root: / permalink: news/:year/:month/:day/:title/ tag_dir: tags @@ -78,7 +78,7 @@ disqus_shortname: konvajs ## Themes: https://github.com/tommy351/hexo/wiki/Themes theme: hexo3 exclude_generator: -- home + - home # Deployment ## Docs: http://hexo.io/docs/deployment.html diff --git a/jsdoc.json b/jsdoc.json index 09b491422..22de9e862 100644 --- a/jsdoc.json +++ b/jsdoc.json @@ -27,7 +27,7 @@ "highlightTutorialCode": true, "analytics": { "ua": "UA-54202824-2", - "domain": "https://konvajs.github.io" + "domain": "https://konvajs.org" }, "outputSourceFiles": false }, diff --git a/react-demos/images/src/index.js b/react-demos/images/src/index.js index 654bb56b5..c2b032633 100755 --- a/react-demos/images/src/index.js +++ b/react-demos/images/src/index.js @@ -3,9 +3,9 @@ import { render } from 'react-dom'; import { Stage, Layer, Image } from 'react-konva'; import useImage from 'use-image'; -// the first very simple and recomended way: +// the first very simple and recommended way: const LionImage = () => { - const [image] = useImage('https://konvajs.github.io/assets/lion.png'); + const [image] = useImage('https://konvajs.org/assets/lion.png'); return ; }; @@ -65,7 +65,7 @@ class App extends Component { return ( - + diff --git a/source/docs/animations/Create_an_Animation.md b/source/docs/animations/Create_an_Animation.md index 4edd12e4f..f7b53d90a 100644 --- a/source/docs/animations/Create_an_Animation.md +++ b/source/docs/animations/Create_an_Animation.md @@ -16,7 +16,7 @@ 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](https://konvajs.github.io/api/Konva.Animation.html). +For a full list of attributes and methods, check out the [Konva.Animation documentation](/api/Konva.Animation.html). ## HTML5 Canvas Konva Animation Template diff --git a/source/docs/animations/Moving.md b/source/docs/animations/Moving.md index 46d1ac926..1cf4342e6 100644 --- a/source/docs/animations/Moving.md +++ b/source/docs/animations/Moving.md @@ -4,7 +4,7 @@ title: HTML5 Canvas Animate Position Tutorial 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](https://konvajs.github.io/api/Konva.Animation.html). +For a full list of attributes and methods, check out the [Konva.Animation documentation](/api/Konva.Animation.html). {% iframe /downloads/code/animations/Moving.html %} diff --git a/source/docs/animations/Rotation.md b/source/docs/animations/Rotation.md index d0ee29c7a..a1be1664b 100644 --- a/source/docs/animations/Rotation.md +++ b/source/docs/animations/Rotation.md @@ -7,7 +7,7 @@ To animate a shape's rotation with Konva, we can create a new animation with 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](https://konvajs.github.io/api/Konva.Animation.html). +For a full list of attributes and methods, check out the [Konva.Animation documentation]/api/Konva.Animation.html). {% iframe /downloads/code/animations/Rotation.html %} diff --git a/source/docs/animations/Scaling.md b/source/docs/animations/Scaling.md index 6217e9770..1178fb718 100644 --- a/source/docs/animations/Scaling.md +++ b/source/docs/animations/Scaling.md @@ -9,7 +9,7 @@ of a yellow hexagon, and the x component of a red hexagon about an axis position Instructions: drag and drop the hexagons as they animate -For a full list of attributes and methods, check out the [Konva.Animation documentation](https://konvajs.github.io/api/Konva.Animation.html). +For a full list of attributes and methods, check out the [Konva.Animation documentation](/api/Konva.Animation.html). {% iframe /downloads/code/animations/Scaling.html %} diff --git a/source/docs/animations/Stop_Animation.md b/source/docs/animations/Stop_Animation.md index 9a9412c2d..8f04c67ef 100644 --- a/source/docs/animations/Stop_Animation.md +++ b/source/docs/animations/Stop_Animation.md @@ -6,7 +6,7 @@ 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](https://konvajs.github.io/api/Konva.Animation.html). +For a full list of attributes and methods, check out the [Konva.Animation documentation](/api/Konva.Animation.html). {% iframe /downloads/code/animations/Stop_Animation.html %} diff --git a/source/docs/clipping/Clipping_Regions.md b/source/docs/clipping/Clipping_Regions.md index 600776ad6..2e545d34a 100644 --- a/source/docs/clipping/Clipping_Regions.md +++ b/source/docs/clipping/Clipping_Regions.md @@ -6,7 +6,7 @@ property of a group or a layer. 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. -For more complex cases take a look into clipping function. [Clipping Function](https://konvajs.github.io/docs/clipping/Clipping_Function.html) +For more complex cases take a look into clipping function. [Clipping Function](/docs/clipping/Clipping_Function.html) {% iframe /downloads/code/clipping/Clipping_Regions.html %} diff --git a/source/docs/filters/Blur.md b/source/docs/filters/Blur.md index 9a9349733..3ba17e65c 100644 --- a/source/docs/filters/Blur.md +++ b/source/docs/filters/Blur.md @@ -9,7 +9,7 @@ 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](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/Blur.html %} diff --git a/source/docs/filters/Brighten.md b/source/docs/filters/Brighten.md index 95dce4013..3a2391c5a 100644 --- a/source/docs/filters/Brighten.md +++ b/source/docs/filters/Brighten.md @@ -11,7 +11,7 @@ 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](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/Brighten.html %} diff --git a/source/docs/filters/Contrast.md b/source/docs/filters/Contrast.md index 69c0ba27e..b89786f9b 100644 --- a/source/docs/filters/Contrast.md +++ b/source/docs/filters/Contrast.md @@ -8,7 +8,7 @@ To change contrast of an image with Konva, we can use the `Konva.Filters.Contras Instructions: Slide the control to change contrast value. -For all available filters go to [Filters Documentation](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/Contrast.html %} diff --git a/source/docs/filters/Custom_Filter.md b/source/docs/filters/Custom_Filter.md index 4f6a2f94a..cd62d3072 100644 --- a/source/docs/filters/Custom_Filter.md +++ b/source/docs/filters/Custom_Filter.md @@ -19,7 +19,7 @@ In this demo we will create custom filter that will draw solid border around ima Since following contour is a complex thing we will use a hack. So we will use blurred shadow as a border foundation. We will replace transparent/blurred pixels with our solid color that we want for border. -For all available filters go to [Filters Documentation](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/Custom_Filter.html %} diff --git a/source/docs/filters/Emboss.md b/source/docs/filters/Emboss.md index f147641bb..7e8cf2cc7 100644 --- a/source/docs/filters/Emboss.md +++ b/source/docs/filters/Emboss.md @@ -6,7 +6,7 @@ function. Then apply filter with `filter()` function. Instructions: Slide the controls to change emboss values. -For all available filters go to [Filters Documentation](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/Emboss.html %} diff --git a/source/docs/filters/Enhance.md b/source/docs/filters/Enhance.md index eff3d39c2..b1a1d7a8c 100644 --- a/source/docs/filters/Enhance.md +++ b/source/docs/filters/Enhance.md @@ -9,7 +9,7 @@ and set the enhance amount with the `enhance` property. Instructions: Slide the control to adjust the enhance value. -For all available filters go to [Filters Documentation](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/Enhance.html %} diff --git a/source/docs/filters/Grayscale.md b/source/docs/filters/Grayscale.md index dd2295ae9..c28ecba52 100644 --- a/source/docs/filters/Grayscale.md +++ b/source/docs/filters/Grayscale.md @@ -6,7 +6,7 @@ To apply filter to an `Konva.Image`, we have to cache it first with `cache()` fu 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](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/Grayscale.html %} diff --git a/source/docs/filters/HSL.md b/source/docs/filters/HSL.md index 0c7e85d54..41e8159a6 100644 --- a/source/docs/filters/HSL.md +++ b/source/docs/filters/HSL.md @@ -7,7 +7,7 @@ To change hue, saturation and luminance components of an image with Konva, we ca Instructions: Slide the controls to change hsl values. -For all available filters go to [Filters Documentation](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/HSL.html %} diff --git a/source/docs/filters/HSV.md b/source/docs/filters/HSV.md index 915f6302a..19a508cad 100644 --- a/source/docs/filters/HSV.md +++ b/source/docs/filters/HSV.md @@ -7,7 +7,7 @@ To change hue, saturation and value components of an image with Konva, we can us Instructions: Slide the controls to change hsv values. -For all available filters go to [Filters Documentation](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/HSV.html %} diff --git a/source/docs/filters/Invert.md b/source/docs/filters/Invert.md index 9eb6085f8..c118978b3 100644 --- a/source/docs/filters/Invert.md +++ b/source/docs/filters/Invert.md @@ -6,7 +6,7 @@ To apply filter to an `Konva.Image`, we have to cache it first with `cache()` fu 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](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/Invert.html %} diff --git a/source/docs/filters/Kaleidoscope.md b/source/docs/filters/Kaleidoscope.md index 89ad755ee..7caf86685 100644 --- a/source/docs/filters/Kaleidoscope.md +++ b/source/docs/filters/Kaleidoscope.md @@ -9,7 +9,7 @@ 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](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/Kaleidoscope.html %} diff --git a/source/docs/filters/Mask.md b/source/docs/filters/Mask.md index fa4eeed1e..3001dead2 100644 --- a/source/docs/filters/Mask.md +++ b/source/docs/filters/Mask.md @@ -6,7 +6,7 @@ To apply filter to an `Konva.Image`, we have to cache it first with `cache()` fu To mark the colors of an image with Konva, we can use the `Konva.Filters.Mask` filter. -For all available filters go to [Filters Documentation](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/Mask.html %} diff --git a/source/docs/filters/Multiple_Filters.md b/source/docs/filters/Multiple_Filters.md index 15bc759b3..7a507b8a2 100644 --- a/source/docs/filters/Multiple_Filters.md +++ b/source/docs/filters/Multiple_Filters.md @@ -4,7 +4,7 @@ title: HTML5 Canvas 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](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/Multiple_Filters.html %} diff --git a/source/docs/filters/Noise.md b/source/docs/filters/Noise.md index 701afaed8..f505aca57 100644 --- a/source/docs/filters/Noise.md +++ b/source/docs/filters/Noise.md @@ -8,7 +8,7 @@ To change noise of an image with Konva, we can use the `Konva.Filters.Noise`. Instructions: Slide the control to change noise value. -For all available filters go to [Filters Documentation](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/Noise.html %} diff --git a/source/docs/filters/Pixelate.md b/source/docs/filters/Pixelate.md index a0eb733e9..846476f2d 100644 --- a/source/docs/filters/Pixelate.md +++ b/source/docs/filters/Pixelate.md @@ -8,7 +8,7 @@ To change pixelate effect of an image with Konva, we can use the `Konva.Filters. Instructions: Slide the control to change pixel size value. -For all available filters go to [Filters Documentation](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/Pixelate.html %} diff --git a/source/docs/filters/RGB.md b/source/docs/filters/RGB.md index 86a9f4606..3c6308d27 100644 --- a/source/docs/filters/RGB.md +++ b/source/docs/filters/RGB.md @@ -8,7 +8,7 @@ To change rgb components of an image with Konva, we can use the `Konva.Filters.R Instructions: Slide the controls to change rgb values. -For all available filters go to [Filters Documentation](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/RGB.html %} diff --git a/source/docs/filters/RGBA.md b/source/docs/filters/RGBA.md index 43c549e8c..39788764e 100644 --- a/source/docs/filters/RGBA.md +++ b/source/docs/filters/RGBA.md @@ -8,7 +8,7 @@ To change rgba components of an image with Konva, we can use the `Konva.Filters. Instructions: Slide the controls to change rgba values. -For all available filters go to [Filters Documentation](https://konvajs.github.io/api/Konva.Filters.html). +For all available filters go to [Filters Documentation](/api/Konva.Filters.html). {% iframe /downloads/code/filters/RGBA.html %} diff --git a/source/docs/groups_and_layers/Groups.md b/source/docs/groups_and_layers/Groups.md index 7409c471b..0f3640817 100644 --- a/source/docs/groups_and_layers/Groups.md +++ b/source/docs/groups_and_layers/Groups.md @@ -6,7 +6,7 @@ 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](https://konvajs.github.io/api/Konva.Group.html). +Node trees. For a full list of attributes and methods, check out the [Konva.Group documentation](/api/Konva.Group.html). {% iframe /downloads/code/groups_and_layers/Groups.html %} diff --git a/source/docs/overview.md b/source/docs/overview.md index fa3b50c6f..78f4f9136 100644 --- a/source/docs/overview.md +++ b/source/docs/overview.md @@ -152,12 +152,12 @@ circle.on('dragend', function() { console.log('drag stopped'); }); ``` -See [working example](https://konvajs.github.io/docs/events/Binding_Events.html). +See [working example](/docs/events/Binding_Events.html). ## DRAG AND DROP `Konva` has builtin drag support. For the current moment there is no `drop` events (`drop`, `dragenter`, `dragleave`, `dragover`) -but it is very easy to implement them [via framework](https://konvajs.github.io/docs/drag_and_drop/Drop_Events.html). +but it is very easy to implement them [via framework](/docs/drag_and_drop/Drop_Events.html). To enable drag&drop just set property draggable = true. @@ -165,11 +165,11 @@ To enable drag&drop just set property draggable = true. shape.draggable('true'); ``` -Then you can subscribe to drag&drop events and setup [moving limits](https://konvajs.github.io/docs/drag_and_drop/Complex_Drag_and_Drop.html). +Then you can subscribe to drag&drop events and setup [moving limits](/docs/drag_and_drop/Complex_Drag_and_Drop.html). ## Filters -`Konva` has several filters: blur, invert, noise etc. For all available filters see [Filters API](https://konvajs.github.io/api/Konva.Filters.html). +`Konva` has several filters: blur, invert, noise etc. For all available filters see [Filters API](/api/Konva.Filters.html). Example: ![Filter](/assets/overview-filter.png) @@ -178,7 +178,7 @@ Example: You can create animations in two ways: -1. via `Konva.Animation` [Demo](https://konvajs.github.io/docs/animations/Moving.html): +1. via `Konva.Animation` [Demo](/docs/animations/Moving.html): ``` var anim = new Konva.Animation(function(frame) { var time = frame.time, @@ -189,7 +189,7 @@ var anim = new Konva.Animation(function(frame) { anim.start(); ``` -2. via `Konva.Tween` [Demo](https://konvajs.github.io/docs/tweens/Linear_Easing.html): +2. via `Konva.Tween` [Demo](/docs/tweens/Linear_Easing.html): ``` var tween = new Konva.Tween({ node: rect, @@ -254,11 +254,11 @@ var stage = Konva.Node.create(json, 'container'); ``` shape.cache(); ``` -[Demo](https://konvajs.github.io/docs/performance/Shape_Caching.html) +[Demo](/docs/performance/Shape_Caching.html) 2. Layering. As framework supports several `` elements you can put objects at your discretion. For example your application consists from complex background and several moving shapes. You can use one layer for background and another one for shapes. -While updating shapes you don't need to update background canvas. [Demo](https://konvajs.github.io/docs/performance/Layer_Management.html) +While updating shapes you don't need to update background canvas. [Demo](/docs/performance/Layer_Management.html) You can find all available performance tips here: -[https://konvajs.github.io/docs/performance/All_Performance_Tips.html](https://konvajs.github.io/docs/performance/All_Performance_Tips.html) +[https://konvajs.org/docs/performance/All_Performance_Tips.html](/docs/performance/All_Performance_Tips.html) diff --git a/source/docs/performance/All_Performance_Tips.md b/source/docs/performance/All_Performance_Tips.md index 0fc7ea1fd..3715494b6 100644 --- a/source/docs/performance/All_Performance_Tips.md +++ b/source/docs/performance/All_Performance_Tips.md @@ -9,21 +9,21 @@ Don't want to spend your time with performance issues? Request a [performance re There is a full list of useful performance tips: -1. [Shape Caching](https://konvajs.github.io/docs/performance/Shape_Caching.html) -2. [Layer Management](https://konvajs.github.io/docs/performance/Layer_Management.html) -3. [`batchDraw` method](https://konvajs.github.io/docs/performance/Batch_Draw.html) -4. [Optimize Animation](https://konvajs.github.io/docs/performance/Optimize_Animation.html) -5. [Shape Redraw](https://konvajs.github.io/docs/performance/Shape_Redraw.html) +1. [Shape Caching](/docs/performance/Shape_Caching.html) +2. [Layer Management](/docs/performance/Layer_Management.html) +3. [`batchDraw` method](/docs/performance/Batch_Draw.html) +4. [Optimize Animation](/docs/performance/Optimize_Animation.html) +5. [Shape Redraw](/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](https://konvajs.github.io/api/Konva.FastLayer.html). See [Demo](https://konvajs.github.io/docs/sandbox/Animation_Stress_Test.html) +7. If you don't need event on layer set `layer.hitGraphEnabled(false)`. Or use [Konva.FastLayer](/api/Konva.FastLayer.html). See [Demo](/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. See [Demo](https://konvajs.github.io/docs/sandbox/Drag_and_Drop_Stress_Test.html) -11. [Optimize Stroke Drawing](https://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](https://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html). -13. Try to set `shape.listening(false)` where possible. For more info read [Listening false](https://konvajs.github.io/docs/performance/Listening_False.html). -14. [Avoid Memory Leaks](https://konvajs.github.io/docs/performance/Avoid_Memory_Leaks.html). -15. Don't create large stages. Try to make canvases as small, as possible. 8000px wide canvas is blah 🤢. [use this tip instead](https://konvajs.github.io/docs/sandbox/Canvas_Scrolling.html) +10. While dragging a node you can move it on separate layer. Then move it back to original layer. See [Demo](/docs/sandbox/Drag_and_Drop_Stress_Test.html) +11. [Optimize Stroke Drawing](/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](/docs/performance/Disable_Perfect_Draw.html). +13. Try to set `shape.listening(false)` where possible. For more info read [Listening false](/docs/performance/Listening_False.html). +14. [Avoid Memory Leaks](/docs/performance/Avoid_Memory_Leaks.html). +15. Don't create large stages. Try to make canvases as small, as possible. 8000px wide canvas is blah 🤢. [use this tip instead](/docs/sandbox/Canvas_Scrolling.html) 16. Do not create too many layers. Usually 3-5 is max. 17. Hide (or remove from layer) invisible objects (or objects that go out of the screen). diff --git a/source/docs/react/index.md b/source/docs/react/index.md index a7b43e027..a269b8283 100644 --- a/source/docs/react/index.md +++ b/source/docs/react/index.md @@ -4,7 +4,7 @@ layout: react_page ![ReactKonva Logo](https://cloud.githubusercontent.com/assets/1443320/12193428/3bda2fcc-b623-11e5-8319-b1ccfc95eaec.png) -React Konva is a JavaScript library for drawing complex canvas graphics using [React](http://facebook.github.io/react/). It provides declarative and reactive bindings to the [Konva Framework](https://konvajs.github.io/). +React Konva is a JavaScript library for drawing complex canvas graphics using [React](http://facebook.github.io/react/). It provides declarative and reactive bindings to the [Konva Framework](https://konvajs.org/). [Github Repo](https://github.com/lavrton/react-konva) @@ -13,7 +13,7 @@ An attempt to make [React](http://facebook.github.io/react/) work with the HTML5 Currently you can use all `Konva` nodes and shapes as React components and all `Konva` events are supported on them in same way as normal browser events are supported. -**Note: you can find a lot of demos and examples of using Konva there: https://konvajs.github.io/. Really, just go there and take a look what Konva can do for you. You will be able to do the same with react-konva too. You don't need to learn `react-konva`, just learn Konva.** +**Note: you can find a lot of demos and examples of using Konva there: [https://konvajs.org/](https://konvajs.org/). Really, just go there and take a look what Konva can do for you. You will be able to do the same with react-konva too. You don't need to learn `react-konva`, just learn Konva.** ## Installation diff --git a/source/docs/shapes/Arc.md b/source/docs/shapes/Arc.md index 61cb4f73b..bc9e991e5 100644 --- a/source/docs/shapes/Arc.md +++ b/source/docs/shapes/Arc.md @@ -3,7 +3,7 @@ title: HTML5 canvas Arc Tutorial To create an arc shape with `Konva`, we can instantiate a `Konva.Arc()` object. -For a full list of attributes and methods, check out the [Konva.Arc documentation](https://konvajs.github.io/api/Konva.Arc.html). +For a full list of attributes and methods, check out the [Konva.Arc documentation](/api/Konva.Arc.html). {% iframe /downloads/code/shapes/Arc.html %} diff --git a/source/docs/shapes/Arrow.md b/source/docs/shapes/Arrow.md index 719909142..b0864e817 100644 --- a/source/docs/shapes/Arrow.md +++ b/source/docs/shapes/Arrow.md @@ -3,7 +3,7 @@ title: HTML5 canvas 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](https://konvajs.github.io/api/Konva.Arrow.html). +For a full list of attributes and methods, check out the [Konva.Arrow documentation](/api/Konva.Arrow.html). {% iframe /downloads/code/shapes/Arrow.html %} diff --git a/source/docs/shapes/Circle.md b/source/docs/shapes/Circle.md index 6e57d28d5..869370666 100644 --- a/source/docs/shapes/Circle.md +++ b/source/docs/shapes/Circle.md @@ -3,7 +3,7 @@ title: HTML5 canvas 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](https://konvajs.github.io/api/Konva.Circle.html). +For a full list of attributes and methods, check out the [Konva.Circle documentation](/api/Konva.Circle.html). {% iframe /downloads/code/shapes/Circle.html %} diff --git a/source/docs/shapes/Custom.md b/source/docs/shapes/Custom.md index 5c77d7471..ae3e16f2e 100644 --- a/source/docs/shapes/Custom.md +++ b/source/docs/shapes/Custom.md @@ -47,7 +47,7 @@ There are two properties that can be used for drawing custom shapes: `sceneFunc` -For a full list of attributes and methods, check out the [Konva.Shape documentation](https://konvajs.github.io/api/Konva.Shape.html) +For a full list of attributes and methods, check out the [Konva.Shape documentation](/api/Konva.Shape.html) {% iframe /downloads/code/shapes/Custom.html %} diff --git a/source/docs/shapes/Ellipse.md b/source/docs/shapes/Ellipse.md index 563c8cfa5..23d2d8228 100644 --- a/source/docs/shapes/Ellipse.md +++ b/source/docs/shapes/Ellipse.md @@ -3,7 +3,7 @@ title: HTML5 canvas 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](https://konvajs.github.io/api/Konva.Ellipse.html). +For a full list of attributes and methods, check out the [Konva.Ellipse documentation](/api/Konva.Ellipse.html). {% iframe /downloads/code/shapes/Ellipse.html %} diff --git a/source/docs/shapes/Image.md b/source/docs/shapes/Image.md index b019574c4..b4f9935b2 100644 --- a/source/docs/shapes/Image.md +++ b/source/docs/shapes/Image.md @@ -8,7 +8,7 @@ For `image` property you can use: 2. canvas element 3. video element -For a full list of attributes and methods, check out the [Konva.Image documentation](https://konvajs.github.io/api/Konva.Image.html). +For a full list of attributes and methods, check out the [Konva.Image documentation](/api/Konva.Image.html). {% iframe /downloads/code/shapes/Image.html %} diff --git a/source/docs/shapes/Label.md b/source/docs/shapes/Label.md index 5a74f1f02..1f9e4d617 100644 --- a/source/docs/shapes/Label.md +++ b/source/docs/shapes/Label.md @@ -3,7 +3,7 @@ title: HTML5 canvas 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](https://konvajs.github.io/api/Konva.Label.html). +For a full list of attributes and methods, check out the [Konva.Label documentation](/api/Konva.Label.html). {% iframe /downloads/code/shapes/Label.html %} diff --git a/source/docs/shapes/Line_-_Blob.md b/source/docs/shapes/Line_-_Blob.md index 2f8f879e5..c7b08fe2a 100644 --- a/source/docs/shapes/Line_-_Blob.md +++ b/source/docs/shapes/Line_-_Blob.md @@ -7,7 +7,7 @@ To define the path of the line you should use `points` property. If you have thr Flat array of numbers should work faster and use less memory than array of objects. -For a full list of attributes and methods, check out the [Konva.Line documentation](https://konvajs.github.io/api/Konva.Line.html). +For a full list of attributes and methods, check out the [Konva.Line documentation](/api/Konva.Line.html). {% iframe /downloads/code/shapes/Line_-_Blob.html %} diff --git a/source/docs/shapes/Line_-_Polygon.md b/source/docs/shapes/Line_-_Polygon.md index df2f05205..9ca42c13f 100644 --- a/source/docs/shapes/Line_-_Polygon.md +++ b/source/docs/shapes/Line_-_Polygon.md @@ -8,7 +8,7 @@ To define the path of the line you should use `points` property. If you have thr Flat array of numbers should work faster and use less memory than array of objects. -For a full list of attributes and methods, check out the [Konva.Line documentation](https://konvajs.github.io/api/Konva.Line.html). +For a full list of attributes and methods, check out the [Konva.Line documentation](/api/Konva.Line.html). {% iframe /downloads/code/shapes/Line_-_Polygon.html %} diff --git a/source/docs/shapes/Line_-_Simple_Line.md b/source/docs/shapes/Line_-_Simple_Line.md index 5a7753b4f..9d763b793 100644 --- a/source/docs/shapes/Line_-_Simple_Line.md +++ b/source/docs/shapes/Line_-_Simple_Line.md @@ -7,7 +7,7 @@ To define the path of the line you should use `points` property. If you have thr Flat array of numbers should work faster and use less memory than array of objects. -For a full list of attributes and methods, check out the [Konva.Line documentation](https://konvajs.github.io/api/Konva.Line.html). +For a full list of attributes and methods, check out the [Konva.Line documentation](/api/Konva.Line.html). {% iframe /downloads/code/shapes/Line_-_Simple_line.html %} diff --git a/source/docs/shapes/Line_-_Spline.md b/source/docs/shapes/Line_-_Spline.md index b0ef924a9..907a6ca08 100644 --- a/source/docs/shapes/Line_-_Spline.md +++ b/source/docs/shapes/Line_-_Spline.md @@ -7,7 +7,7 @@ To define the path of the line you should use `points` property. If you have thr Flat array of numbers should work faster and use less memory than array of objects. -For a full list of attributes and methods, check out the [Konva.Line documentation](https://konvajs.github.io/api/Konva.Line.html). +For a full list of attributes and methods, check out the [Konva.Line documentation](/api/Konva.Line.html). {% iframe /downloads/code/shapes/Line_-_Spline.html %} diff --git a/source/docs/shapes/Path.md b/source/docs/shapes/Path.md index cf06bbb4f..cde73302b 100644 --- a/source/docs/shapes/Path.md +++ b/source/docs/shapes/Path.md @@ -5,7 +5,7 @@ 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](https://konvajs.github.io/api/Konva.Path.html). +For a full list of attributes and methods, check out the [Konva.Path documentation](/api/Konva.Path.html). {% iframe /downloads/code/shapes/Path.html %} diff --git a/source/docs/shapes/Rect.md b/source/docs/shapes/Rect.md index 8abc48f3f..493845775 100644 --- a/source/docs/shapes/Rect.md +++ b/source/docs/shapes/Rect.md @@ -3,7 +3,7 @@ title: HTML5 canvas 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](https://konvajs.github.io/api/Konva.Rect.html). +For a full list of attributes and methods, check out the [Konva.Rect documentation](/api/Konva.Rect.html). {% iframe /downloads/code/shapes/rect.html %} diff --git a/source/docs/shapes/RegularPolygon.md b/source/docs/shapes/RegularPolygon.md index fb043aef9..01c9b1242 100644 --- a/source/docs/shapes/RegularPolygon.md +++ b/source/docs/shapes/RegularPolygon.md @@ -3,7 +3,7 @@ title: HTML5 canvas 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](https://konvajs.github.io/api/Konva.RegularPolygon.html). +For a full list of attributes and methods, check out the [Konva.RegularPolygon documentation](/api/Konva.RegularPolygon.html). {% iframe /downloads/code/shapes/RegularPolygon.html %} diff --git a/source/docs/shapes/Ring.md b/source/docs/shapes/Ring.md index 37aff2b86..6416c6d06 100644 --- a/source/docs/shapes/Ring.md +++ b/source/docs/shapes/Ring.md @@ -3,7 +3,7 @@ title: HTML5 canvas 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](https://konvajs.github.io/api/Konva.Ring.html). +For a full list of attributes and methods, check out the [Konva.Ring documentation](/api/Konva.Ring.html). {% iframe /downloads/code/shapes/Ring.html %} diff --git a/source/docs/shapes/Sprite.md b/source/docs/shapes/Sprite.md index b88754385..4bc598db3 100644 --- a/source/docs/shapes/Sprite.md +++ b/source/docs/shapes/Sprite.md @@ -3,7 +3,7 @@ title: HTML5 canvas 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](https://konvajs.github.io/api/Konva.Sprite.html). +For a full list of attributes and methods, check out the [Konva.Sprite documentation](/api/Konva.Sprite.html). {% iframe /downloads/code/shapes/Sprite.html %} diff --git a/source/docs/shapes/Star.md b/source/docs/shapes/Star.md index b48298373..f252b7403 100644 --- a/source/docs/shapes/Star.md +++ b/source/docs/shapes/Star.md @@ -3,7 +3,7 @@ title: HTML5 canvas 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](https://konvajs.github.io/api/Konva.Star.html). +For a full list of attributes and methods, check out the [Konva.Star documentation](/api/Konva.Star.html). {% iframe /downloads/code/shapes/Star.html %} diff --git a/source/docs/shapes/Text.md b/source/docs/shapes/Text.md index 9c90b399f..1a6d61548 100644 --- a/source/docs/shapes/Text.md +++ b/source/docs/shapes/Text.md @@ -3,7 +3,7 @@ title: HTML5 canvas 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](https://konvajs.github.io/api/Konva.Text.html). +For a full list of attributes and methods, check out the [Konva.Text documentation](/api/Konva.Text.html). {% iframe /downloads/code/shapes/Text.html %} diff --git a/source/docs/shapes/TextPath.md b/source/docs/shapes/TextPath.md index 0c34ec69c..30168d64d 100644 --- a/source/docs/shapes/TextPath.md +++ b/source/docs/shapes/TextPath.md @@ -5,7 +5,7 @@ title: HTML5 canvas TextPath Tutorial. Text follows path 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](https://konvajs.github.io/api/Konva.TextPath.html). +For a full list of attributes and methods, check out the [Konva.TextPath documentation](/api/Konva.TextPath.html). {% iframe /downloads/code/shapes/TextPath.html %} diff --git a/source/docs/shapes/Wedge.md b/source/docs/shapes/Wedge.md index 0f1b0d780..753799946 100644 --- a/source/docs/shapes/Wedge.md +++ b/source/docs/shapes/Wedge.md @@ -3,7 +3,7 @@ title: HTML5 canvas 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](https://konvajs.github.io/api/Konva.Wedge.html). +For a full list of attributes and methods, check out the [Konva.Wedge documentation](/api/Konva.Wedge.html). {% iframe /downloads/code/shapes/Wedge.html %} diff --git a/source/docs/tweens/All_Easings.md b/source/docs/tweens/All_Easings.md index dea699e50..c5ad0eb01 100644 --- a/source/docs/tweens/All_Easings.md +++ b/source/docs/tweens/All_Easings.md @@ -4,7 +4,7 @@ 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](https://konvajs.github.io/api/Konva.Easing.html). +For all available easings go to [Easings Documentation](/api/Konva.Easing.html). Instructions: Press "Play" to transition all of the text nodes. diff --git a/source/docs/tweens/Common_Easings.md b/source/docs/tweens/Common_Easings.md index 1926da81d..3c5ec9c98 100644 --- a/source/docs/tweens/Common_Easings.md +++ b/source/docs/tweens/Common_Easings.md @@ -6,7 +6,7 @@ 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](https://konvajs.github.io/api/Konva.Easing.html). +For all available easings go to [Easings Documentation](/api/Konva.Easing.html). Instructions: Mouseover or touchstart the boxes to tween them with different easing functions diff --git a/source/docs/tweens/Linear_Easing.md b/source/docs/tweens/Linear_Easing.md index f9fb7b340..b365c952a 100644 --- a/source/docs/tweens/Linear_Easing.md +++ b/source/docs/tweens/Linear_Easing.md @@ -6,7 +6,7 @@ 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](https://konvajs.github.io/api/Konva.Tween.html). +For a full list of attributes and methods, check out the [Konva.Tween documentation](/api/Konva.Tween.html). {% iframe /downloads/code/tweens/Linear_Easing.html %} diff --git a/source/docs/vue/Save-Load.md b/source/docs/vue/Save-Load.md index 46d0619c3..90c15da40 100644 --- a/source/docs/vue/Save-Load.md +++ b/source/docs/vue/Save-Load.md @@ -5,7 +5,7 @@ layout: vue_page ## How to serialize and deserialize Konva stage with Vue? Pure `Konva` has special mechanizm to save/load full canvas stage with `node.toJSON()` and `Node.create(json)` functions. -[See demo](https://konvajs.github.io/docs/data_and_serialization/Simple_Load.html). +[See demo](/docs/data_and_serialization/Simple_Load.html). But we don't recommend to use these methods if you are using `vue-konva`. In `vue-konva` you should have a state of the app defined in your vue components. That state maps into nodes with templates. To save/load full stage you just need to save/load state of the app and you **don't need to save Konva internals and nodes**. diff --git a/source/docs/vue/index.md b/source/docs/vue/index.md index a73bd4c8d..d22df1750 100644 --- a/source/docs/vue/index.md +++ b/source/docs/vue/index.md @@ -8,14 +8,14 @@ layout: vue_page Vue Konva is a JavaScript library for drawing complex canvas graphics using Vue. -It provides declarative and reactive bindings to the [Konva Framework](https://konvajs.github.io/). +It provides declarative and reactive bindings to the [Konva Framework](https://konvajs.org/). All `vue-konva` components correspond to `Konva` components of the same name with the prefix 'v-'. All the parameters available for `Konva` objects can add as `config` in the prop for corresponding `vue-konva` components. Core shapes are: v-rect, v-circle, v-ellipse, v-line, v-image, v-text, v-text-path, v-star, v-label, SVG Path, v-regular-polygon. Also you can create custom shape. -To get more info about `Konva` you can read [Konva Overview](https://konvajs.github.io/docs/overview.html). +To get more info about `Konva` you can read [Konva Overview](https://konvajs.org/docs/overview.html). ## Quick Start diff --git a/themes/hexo3/layout/_partial/share.ejs b/themes/hexo3/layout/_partial/share.ejs index 86cb52e1e..41a56c032 100644 --- a/themes/hexo3/layout/_partial/share.ejs +++ b/themes/hexo3/layout/_partial/share.ejs @@ -1,6 +1,26 @@ - + -Tweet +Tweet -Follow @lavrton +Follow @lavrton diff --git a/vue-demos/images/src/App.vue b/vue-demos/images/src/App.vue index 6e8c61922..b2863357a 100755 --- a/vue-demos/images/src/App.vue +++ b/vue-demos/images/src/App.vue @@ -1,13 +1,11 @@