lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update docs

Browse Source
This commit is contained in:
Anton Lavrenov 2016-10-25 09:03:25 -06:00
parent 34d40d57e7
commit b12fd40f25
3 changed files with 17 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## Added
- new properties for `Konva.Text`: `letterSpacing`
- new event `contentContextmenu` for `Konva.Stage`
### Changed
- changing a size of `Konva.Stage` will update it in async way (via `batchDraw`).

2
src/Node.js
View File

@ -384,7 +384,7 @@
* bind events to the node. KonvaJS supports mouseover, mousemove,
* mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, click, dblclick, touchstart, touchmove,
* touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Konva Stage supports
* contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup, contentWheel
* contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup, contentWheel, contentContextmenu
* contentClick, contentDblclick, contentTouchstart, contentTouchmove, contentTouchend, contentTap,
* and contentDblTap. Pass in a string of events delimmited by a space to bind multiple events at once
* such as 'mousedown mouseup mousemove'. Include a namespace to bind an

80
test/test.html
View File

@ -8,28 +8,10 @@
overflow: hidden;
background-color: #F0F0F0;
}
#buttons {
position: absolute;
top: 5px;
left: 10px;
}
#buttons > input {
padding: 10px;
display: block;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
<button id="save">
Save as image
</button>
</div>
<script src="../dist/konva-dev.js"></script>
<script>
@ -46,55 +28,23 @@ height: height
});
var layer = new Konva.Layer();
var rectX = stage.getWidth() / 2 - 50;
var rectY = stage.getHeight() / 2 - 25;
(function() {
for (var i = 0; i < 50; i++) {
layer.add(new Konva.Rect({
x: i * 50,
y: 0,
width: 50,
height: 10000,
fill: Konva.Util.getRandomColor()
}));
}
})();
var box = new Konva.Rect({
x: rectX,
y: rectY,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
box.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(box);
layer.draw();
layer.add(new Konva.Rect({
width: 100,
height: 100,
fill: 'red'
}))
stage.add(layer);
function exportCanvas() {
var dataURL = stage.toDataURL({
width: 1500,
height: 1000,
// pixelRatio: 2
});
window.open(dataURL);
}
document.getElementById('save').addEventListener('click', exportCanvas, false);
// stage.getContent().addEventListener('contextmenu', function(e) {
//
// console.log('menu');
// e.preventDefault();
// return false;
// });
stage.on('contentContextmenu', function(e) {
console.log(e.evt.preventDefault());
console.log('context click');
});
</script>
</body>
</html>