text.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Text 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.setWidth(600).setHeight(400);
  23. paper.addShape(new kity.Text().pipe(function() {
  24. this.addSpan(new kity.TextSpan('hello ').fill('red'));
  25. this.addSpan(new kity.TextSpan(' kity').fill('blue'));
  26. this.setAnchor('middle');
  27. this.setSize(36);
  28. this.setPath(new kity.Path().pipe(function(){
  29. var d = this.getDrawer();
  30. d.moveTo(150, 200);
  31. d.carcTo(200, 450, 200);
  32. this.fill('none');
  33. this.stroke('green');
  34. paper.addShape(this);
  35. }));
  36. }));
  37. };
  38. </script>
  39. </head>
  40. <body>
  41. </body>
  42. </html>