curve.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Pen 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. var Curve2 = kity.createClass({
  24. base: kity.Group,
  25. constructor: function(x, y, s) {
  26. this.callBase();
  27. var points = [
  28. new kity.ShapePoint(15, 100),
  29. new kity.ShapePoint(105, 10),
  30. new kity.ShapePoint(195, 190),
  31. new kity.ShapePoint(285, 100)
  32. ];
  33. var curve = new kity.Curve(points).fill('none').stroke('black').setSmoothFactor(s);
  34. this.addShape(curve);
  35. for(var i = 0; i < points.length; i++) {
  36. var p = points[i];
  37. this.addShape(new kity.Rect(6, 6, p.getX() - 3, p.getY() - 3).fill('red'));
  38. }
  39. this.addShape(new kity.Text('k = ' + s).setX(180).setY(50).fill('blue'));
  40. this.scale(0.8).translate(x, y);
  41. }
  42. });
  43. paper.addShapes([
  44. new Curve2(0, 0, 0),
  45. new Curve2(300, 0, 0.5),
  46. new Curve2(0, 200, 1),
  47. new Curve2(300, 200, 5)
  48. ]);
  49. };
  50. </script>
  51. </head>
  52. <body>
  53. </body>
  54. </html>