mirror of
https://github.com/konvajs/konva.git
synced 2025-09-19 19:07:59 +08:00
Merge branch 'master' of github.com:lavrton/KineticJS
This commit is contained in:
48
README.md
48
README.md
@@ -1,3 +1,5 @@
|
|||||||
|

|
||||||
|
|
||||||
#Konva
|
#Konva
|
||||||
|
|
||||||
Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.
|
Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.
|
||||||
@@ -15,6 +17,50 @@ This repository began as a GitHub fork of [ericdrowell/KineticJS](https://github
|
|||||||
* **Discover:** [Tutorials](http://konvajs.github.io/docs), [API Documentation](http://konvajs.github.io/docs)
|
* **Discover:** [Tutorials](http://konvajs.github.io/docs), [API Documentation](http://konvajs.github.io/docs)
|
||||||
* **Help:** [StackOverflow](http://stackoverflow.com/questions/tagged/konvajs)
|
* **Help:** [StackOverflow](http://stackoverflow.com/questions/tagged/konvajs)
|
||||||
|
|
||||||
|
# Quick Look
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js"></script>
|
||||||
|
<div id="container"></div>
|
||||||
|
<script>
|
||||||
|
var stage = new Konva.Stage({
|
||||||
|
container: 'container',
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight
|
||||||
|
});
|
||||||
|
|
||||||
|
// add canvas element
|
||||||
|
var layer = new Konva.Layer();
|
||||||
|
stage.add(layer);
|
||||||
|
|
||||||
|
// create shape
|
||||||
|
var box = new Konva.Rect({
|
||||||
|
x: 50,
|
||||||
|
y: 50,
|
||||||
|
width: 100,
|
||||||
|
height: 50,
|
||||||
|
fill: '#00D2FF',
|
||||||
|
stroke: 'black',
|
||||||
|
strokeWidth: 4,
|
||||||
|
draggable: true
|
||||||
|
});
|
||||||
|
layer.add(box);
|
||||||
|
|
||||||
|
layer.draw();
|
||||||
|
|
||||||
|
// add cursor styling
|
||||||
|
box.on('mouseover', function() {
|
||||||
|
document.body.style.cursor = 'pointer';
|
||||||
|
});
|
||||||
|
box.on('mouseout', function() {
|
||||||
|
document.body.style.cursor = 'default';
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
#Installation
|
#Installation
|
||||||
|
|
||||||
* `bower install konva`
|
* `bower install konva`
|
||||||
@@ -52,7 +98,7 @@ If you add a file in the src directory, be sure to add the filename to the sourc
|
|||||||
Konva uses Mocha for testing.
|
Konva uses Mocha for testing.
|
||||||
|
|
||||||
* If you need run test only one time run `gulp test`.
|
* If you need run test only one time run `gulp test`.
|
||||||
* While developing it is easy to use `gulp` default task with with watch. Just run it and go to [http://localhost:8080/test/runner.html](http://localhost:8080/test/runner.html). After src file change konva-dev.js will be automatically created, so you just need refresh test the page.
|
* While developing it is easy to use `gulp` default task with watch. Just run it and go to [http://localhost:8080/test/runner.html](http://localhost:8080/test/runner.html). After src file change konva-dev.js will be automatically created, so you just need refresh test the page.
|
||||||
|
|
||||||
Konva is covered with hundreds of tests and well over a thousand assertions.
|
Konva is covered with hundreds of tests and well over a thousand assertions.
|
||||||
Konva uses TDD (test driven development) which means that every new feature or bug fix is accompanied with at least one new test.
|
Konva uses TDD (test driven development) which means that every new feature or bug fix is accompanied with at least one new test.
|
||||||
|
Reference in New Issue
Block a user