kityminder
Version:
95 lines (84 loc) • 3.24 kB
HTML
<html>
<head>
<!-- 必须强制指定页面编码为 UTF-8 -->
<meta charset="utf-8">
<!-- Demo 的简要说明，必须要填写 -->
<meta name="description" content="演示如何使用拖动，如何改变视野">
<!-- Demo 的作者，建议填写 -->
<meta name="author" content="kity@baidu.com">
<!-- Demo 的标题，必须填写 -->
<title>拖动和视野控制</title>
<!-- Demo 开发过程中使用 CMD 引入 Kity 源码，方便调试 -->
<!-- dev start -->
<!-- 目录型的 Demo 注意修正源码引用路径 -->
<script src="../dev-lib/dev-define.js"></script>
<script>
// 设置好 kity 源代码目录
inc.config( { base: '../src'} );
// 定义 Demo 模块
define('demo', function(require) {
var Class = require('core/class');
var Paper = require('graphic/paper');
var Shape = require('graphic/shape');
var Path = require('graphic/path');
var Grid = require('../demo/public/grid');
var Draggable = require('../demo/public/draggable');
Class.extendClass( Paper, Draggable );
Class.extendClass( Shape, Draggable );
var Rect = require('graphic/rect');
var paper = new Paper(document.body);
paper.setViewBox(-50, -50, 100, 100).drag();
paper.on('dragstart', function() {
this.setStyle('cursor', '-webkit-grabbing');
}).on('dragend', function() {
this.setStyle('cursor', '-webkit-grab');
}).trigger('dragend');
paper.addShape(new Grid(-1000, -1000, 2000, 2000, 10));
paper.addShape(new Rect(30, 30, 15, 15).pipe(function() {
this.fill('red');
this.scale(0.5);
this.drag();
this.setStyle('cursor', 'move');
}));
paper.addShape(new Path().pipe(function() {
var d = this.getDrawer();
d.moveTo(0, -10000).lineTo(0, 10000);
d.moveTo(-10000, 0).lineTo(10000, 0);
this.stroke('black', 1);
}));
window.addEventListener('mousewheel', function(e) {
//console.log("wheel", e);
e.preventDefault();
});
paper.on('click', function(e) {
console.log("down", e.getPosition().x, e.getPosition().y);
e.preventDefault();
});
document.body.addEventListener('mousewheel', function(e) {
var viewport = paper.getViewPort();
if(e.wheelDelta > 0) {
viewport.zoom = viewport.zoom * 0.95;
} else {
viewport.zoom = viewport.zoom / 0.95;
}
console.log(viewport);
paper.setViewPort(viewport);
});
});
</script>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
</style>
</head>
<body></body>
<script>
// 启动 Demo 模块
inc.use('demo');
</script>
</html>