transform.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Transform Example</title>
  5. <!-- 正式发布的时候, 只需替换掉相应的脚本文件即可 -->
  6. <!-- dev 版本 示例所需脚本文件 start -->
  7. <script src="../dev-lib/sea.js"></script>
  8. <script>
  9. seajs.config({
  10. base: '../src'
  11. });
  12. </script>
  13. <script src="../dev-lib/exports.js"></script>
  14. <script src="../dev-lib/dev-start.js"></script>
  15. <!-- dev 版本 示例所需脚本文件 end -->
  16. <!-- 正式版本 示例所需脚本文件 start -->
  17. <!--<script src="../dist/kitygraph.all.min.js"></script>-->
  18. <!-- 正式版本 示例所需脚本文件 end -->
  19. <script>
  20. window.onload = function () {
  21. var paper = new kity.Paper(document.body);
  22. paper.setViewBox(-300, -200, 600, 400);
  23. paper.setWidth(600).setHeight(400);
  24. paper.addShape(new kity.Path().pipe(function() {
  25. var d = this.getDrawer();
  26. d.moveTo(-300, 0).lineTo(300, 0);
  27. d.moveTo(0, -200).lineTo(0, 200);
  28. this.stroke('gray');
  29. }));
  30. r = new kity.Path('M0 0 L 150 0 0 50 Z').stroke(new kity.Pen().pipe(function() {
  31. this.setColor('hsl(0, 60%, 50%)');
  32. this.setWidth(1);
  33. this.setDashArray([5, 5]);
  34. })).fill('hsla(0, 50%, 80%, .5)');
  35. t = new kity.Path('M0 0 L 150 0 0 50 Z').stroke('red').fill('hsla(0, 50%, 80%, .5)');
  36. paper.addShape(r);
  37. paper.addShape(t);
  38. t.scale(2);
  39. };
  40. </script>
  41. </head>
  42. <body>
  43. </body>
  44. </html>