cax-svg - add ellipse

packages/cax-svg/cax/render/display/shape/ellipse.js

@@ -27,18 +27,18 @@ class Ellipse extends Shape {
     this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye)
     this.bezierCurveTo(xm - ox, ye, 0, ym + oy, 0, ym)
 
-    if (this.option.strokeStyle) {
+    if (this.option.fillStyle || this.option.fill) {
+      this.fillStyle(this.option.fillStyle || this.option.fill)
+      this.fill()
+    }
+
+    if (this.option.strokeStyle || this.option.stroke) {
       if (this.option.lineWidth !== undefined) {
         this.lineWidth(this.option.lineWidth)
       }
-      this.strokeStyle(this.option.strokeStyle)
+      this.strokeStyle(this.option.strokeStyle || this.option.stroke)
       this.stroke()
     }
-
-    if (this.option.fillStyle) {
-      this.fillStyle(this.option.fillStyle)
-      this.fill()
-    }
   }
 }
 

packages/cax-svg/cax/svg/ellipse.js

@@ -0,0 +1,20 @@
+import Ellipse from '../render/display/shape/ellipse'
+import { parseStyle } from './parse-style'
+
+export function ellipse(props) {
+
+  const options = Object.assign({
+    rx: 0,
+    ry: 0,
+    cx: 0,
+    cy: 0
+  }, props)
+
+  const ellipse = new Ellipse(Number(options.rx)*2, Number(options.ry)*2, parseStyle(props.style))
+  ellipse.x = Number(options.cx)
+  ellipse.y = Number(options.cy)
+
+  console.log(ellipse)
+  return ellipse
+
+}

packages/cax-svg/cax/svg/index.js

@@ -1,6 +1,7 @@
 import Group from '../render/display/group'
 import { rect } from './rect'
 import { circle } from './circle'
+import { ellipse } from './ellipse'
 
 class SVG extends Group {
   constructor(vdom) {
@@ -27,6 +28,12 @@ class SVG extends Group {
       this.add(circle(vdomChild.props))
 
       break;
+
+      case 'ellipse':
+      console.log(1)
+      this.add(ellipse(vdomChild.props))
+console.log(this)
+      break;
     }
 
 

packages/cax-svg/pages/index/index.js

@@ -18,6 +18,9 @@ Page({
     const circle = new SVG(html`
     <svg >
         <circle cx="140" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
+        <ellipse cx="240" cy="40" rx="30" ry="15"
+        style="stroke:#006600; fill:#00cc00"/>
+
     </svg>`)
 
     stage.add(circle)