viewport.html 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- 必须强制指定页面编码为 UTF-8 -->
  5. <meta charset="utf-8">
  6. <!-- Demo 的简要说明,必须要填写 -->
  7. <meta name="description" content="演示如何使用拖动,如何改变视野">
  8. <!-- Demo 的作者,建议填写 -->
  9. <meta name="author" content="kity@baidu.com">
  10. <!-- Demo 的标题,必须填写 -->
  11. <title>拖动和视野控制</title>
  12. <!-- Demo 开发过程中使用 CMD 引入 Kity 源码,方便调试 -->
  13. <!-- dev start -->
  14. <!-- 目录型的 Demo 注意修正源码引用路径 -->
  15. <script src="../dev-lib/sea.js"></script>
  16. <script>
  17. // 设置好 kity 源代码目录
  18. seajs.config( { base: '../src'} );
  19. // 定义 Demo 模块
  20. define('demo', function(require) {
  21. var Class = require('core/class');
  22. var Paper = require('graphic/paper');
  23. var Shape = require('graphic/shape');
  24. var Path = require('graphic/path');
  25. var Grid = require('../demo/public/grid');
  26. var Draggable = require('../demo/public/draggable');
  27. Class.extendClass( Paper, Draggable );
  28. Class.extendClass( Shape, Draggable );
  29. var Rect = require('graphic/rect');
  30. var paper = new Paper(document.body);
  31. paper.setViewBox(-50, -50, 100, 100).drag();
  32. paper.on('dragstart', function() {
  33. this.setStyle('cursor', '-webkit-grabbing');
  34. }).on('dragend', function() {
  35. this.setStyle('cursor', '-webkit-grab');
  36. }).trigger('dragend');
  37. paper.addShape(new Grid(-1000, -1000, 2000, 2000, 10));
  38. paper.addShape(new Rect(30, 30, 15, 15).pipe(function() {
  39. this.fill('red');
  40. this.scale(0.5);
  41. this.drag();
  42. this.setStyle('cursor', 'move');
  43. }));
  44. paper.addShape(new Path().pipe(function() {
  45. var d = this.getDrawer();
  46. d.moveTo(0, -10000).lineTo(0, 10000);
  47. d.moveTo(-10000, 0).lineTo(10000, 0);
  48. this.stroke('black', 1);
  49. }));
  50. window.addEventListener('mousewheel', function(e) {
  51. //console.log("wheel", e);
  52. e.preventDefault();
  53. });
  54. paper.on('click', function(e) {
  55. console.log("down", e.getPosition().x, e.getPosition().y);
  56. e.preventDefault();
  57. });
  58. document.body.addEventListener('mousewheel', function(e) {
  59. var viewport = paper.getViewPort();
  60. if(e.wheelDelta > 0) {
  61. viewport.zoom = viewport.zoom * 0.95;
  62. } else {
  63. viewport.zoom = viewport.zoom / 0.95;
  64. }
  65. console.log(viewport);
  66. paper.setViewPort(viewport);
  67. });
  68. });
  69. </script>
  70. <style>
  71. body, html {
  72. margin: 0;
  73. padding: 0;
  74. overflow: hidden;
  75. height: 100%;
  76. }
  77. </style>
  78. </head>
  79. <body></body>
  80. <script>
  81. // 启动 Demo 模块
  82. seajs.use('demo');
  83. </script>
  84. </html>