demo.start.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. /*
  2. * Photoshop钢笔工具
  3. */
  4. define( function ( require, exports, module ) {
  5. // 资源引用
  6. var Paper = require( "graphic/paper" ),
  7. Color = require( "graphic/color" ),
  8. Rect = require( "graphic/rect" ),
  9. PatternBrush = require( "graphic/pattern" );
  10. // 程序变量
  11. var paper = null,
  12. //zoom倍数
  13. ZOOM = 100,
  14. controller = null,
  15. Controller = require( "../ps-pen/demo.controller" );
  16. function init () {
  17. paper = new Paper( document.getElementById( "kityContainer" ) );
  18. paper.setViewBox( 0, 0, 600 * ZOOM, 300 * ZOOM );
  19. initPaperBackground();
  20. controller = new Controller();
  21. controller.takeover( paper );
  22. initButtonEvent();
  23. }
  24. // 启动按钮的控制事件
  25. function initButtonEvent () {
  26. $( "#penBtn" ).on( "click", function () {
  27. controller.enableDraw();
  28. controller.disableModify();
  29. } );
  30. $( "#modifyBtn" ).on( "click", function () {
  31. controller.disableDraw();
  32. controller.enableModify();
  33. } );
  34. }
  35. // 初始化画布背景
  36. function initPaperBackground () {
  37. var brush = new PatternBrush(),
  38. rect = null,
  39. radius = 10*100,
  40. bgRect = new Rect( 600 * ZOOM, 300 * ZOOM );
  41. brush.setWidth( 2*radius ).setHeight( 2*radius );
  42. for ( var i = 0, len = 2; i < len; i++ ) {
  43. rect = new Rect( radius, radius, i*radius, i*radius );
  44. rect.fill( new Color( "lightgray" ).set( 'a', 0.2 ) );
  45. brush.addShape( rect );
  46. }
  47. bgRect.fill( brush );
  48. paper.addResource( brush );
  49. paper.addShape( bgRect );
  50. }
  51. window.jQuery( init );
  52. } );