1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- <!DOCTYPE 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/sea.js"></script>
- <script>
- // 设置好 kity 源代码目录
- seajs.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 模块
- seajs.use('demo');
- </script>
- </html>
|