Basic graphics

The plugin has a rich set of basic graphics built in. Here are the related examples, you can also try to drag them.

circle

shape attribute

Attribute name	Type	Default	Annotation
rx	Number	0	Center x-axis coordinate.
ry	Number	0	Center r-axis coordinate.
r	Number	0	Circle radius.

Click to expand or collapse

export default function (render) {
  const { area: [w, h] } = render

  return {
    name: 'circle',
    animationCurve: 'easeOutBack',
    hover: true,
    drag: true,
    shape: {
      rx: w / 2,
      ry: h / 2,
      r: 50
    },
    style: {
      fill: '#9ce5f4',
      shadowBlur: 0,
      shadowColor: '#66eece',
      hoverCursor: 'pointer'
    },
    mouseEnter (e) {
      this.animation('shape', { r: 70 }, true)
      this.animation('style', { shadowBlur: 20 })
    },
    mouseOuter (e) {
      this.animation('shape', { r: 50 }, true)
      this.animation('style', { shadowBlur: 0 })
    }
  }
}

ellipse

shape attribute

Attribute name	Type	Default	Annotation
rx	Number	0	Center x-axis coordinate.
ry	Number	0	Center y-axis coordinate.
hr	Number	0	Horizontal axis radius.
vr	Number	0	Vertical axis radius.

Click to expand or collapse

export default function (render) {
  const { area: [w, h] } = render

  return {
    name: 'ellipse',
    animationCurve: 'easeOutBack',
    hover: true,
    drag: true,
    shape: {
      rx: w / 2,
      ry: h / 2,
      hr: 80,
      vr: 30
    },
    style: {
      fill: '#9ce5f4',
      shadowBlur: 0,
      shadowColor: '#66eece',
      scale: [1, 1],
      hoverCursor: 'pointer'
    },
    mouseEnter (e) {
      this.animation('style', { scale: [1.5, 1.5], shadowBlur: 20 })
    },
    mouseOuter (e) {
      this.animation('style', { scale: [1, 1], shadowBlur: 0 })
    }
  }
}

rect

shape attribute

Attribute name	Type	Default	Annotation
x	Number	0	The x coordinate of the top left corner of the rectangle.
y	Number	0	The y coordinate of the top left corner of the rectangle.
w	Number	0	Rectangle width.
h	Number	0	Rectangle height.

Click to expand or collapse

export default function (render) {
  const { area: [w, h] } = render

  const rectWidth = 200
  const rectHeight = 50

  return {
    name: 'rect',
    animationCurve: 'easeOutBack',
    hover: true,
    drag: true,
    shape: {
      x: w / 2 - rectWidth / 2,
      y: h / 2 - rectHeight / 2,
      w: rectWidth,
      h: rectHeight
    },
    style: {
      fill: '#9ce5f4',
      shadowBlur: 0,
      shadowColor: '#66eece',
      hoverCursor: 'pointer',
      translate: [0, 0]
    },
    mouseEnter (e) {
      this.animation('shape', { w: 400 }, true)
      this.animation('style', { shadowBlur: 20, translate: [-100, 0] })
    },
    mouseOuter (e) {
      this.animation('shape', { w: 200 }, true)
      this.animation('style', { shadowBlur: 0, translate: [0, 0] })
    }
  }
}

ring

shape attribute

Attribute name	Type	Default	Annotation
rx	Number	0	Center x-axis coordinate.
ry	Number	0	Center y-axis coordinate.
r	Number	0	Ring radius.

Click to expand or collapse

export default function (render) {
  const { area: [w, h] } = render

  return {
    name: 'ring',
    animationCurve: 'easeOutBack',
    hover: true,
    drag: true,
    shape: {
      rx: w / 2,
      ry: h / 2,
      r: 50
    },
    style: {
      stroke: '#9ce5f4',
      lineWidth: 20,
      hoverCursor: 'pointer',
      shadowBlur: 0,
      shadowColor: '#66eece'
    },
    mouseEnter (e) {
      this.animation('style', { shadowBlur: 20, lineWidth: 30 })
    },
    mouseOuter (e) {
      this.animation('style', { shadowBlur: 0, lineWidth: 20 })
    }
  }
}

arc

shape attribute

Attribute name	Type	Default	Annotation
rx	Number	0	Center x-axis coordinate.
ry	Number	0	Center y-axis coordinate.
r	Number	0	Arc radius.
startAngle	Number	0	Arc start angle.
endAngle	Number	0	Arc end angle.
clockWise	Boolean	true	Clockwise

Click to expand or collapse

export default function (render) {
  const { area: [w, h] } = render

  return {
    name: 'arc',
    animationCurve: 'easeOutBack',
    hover: true,
    drag: true,
    shape: {
      rx: w / 2,
      ry: h / 2,
      r: 60,
      startAngle: 0,
      endAngle: Math.PI / 3
    },
    style: {
      stroke: '#9ce5f4',
      lineWidth: 20,
      shadowBlur: 0,
      rotate: 0,
      shadowColor: '#66eece',
      hoverCursor: 'pointer'
    },
    mouseEnter (e) {
      this.animation('shape', { endAngle: Math.PI }, true)
      this.animation('style', { shadowBlur: 20, rotate: -30, lineWidth: 30 })
    },
    mouseOuter (e) {
      this.animation('shape', { endAngle: Math.PI / 3 }, true)
      this.animation('style', { shadowBlur: 0, rotate: 0, lineWidth: 20 })
    }
  }
}

sector

shape attribute

Attribute name	Type	Default	Annotation
rx	Number	0	Center x-axis coordinate.
ry	Number	0	Center y-axis coordinate.
r	Number	0	Sector radius.
startAngle	Number	0	Sector start angle.
endAngle	Number	0	Sector end angle.
clockWise	Boolean	true	Clockwise

Click to expand or collapse

export default function (render) {
  const { area: [w, h] } = render

  return {
    name: 'sector',
    animationCurve: 'easeOutBack',
    hover: true,
    drag: true,
    shape: {
      rx: w / 2,
      ry: h / 2,
      r: 60,
      startAngle: 0,
      endAngle: Math.PI / 3
    },
    style: {
      fill: '#9ce5f4',
      shadowBlur: 0,
      rotate: 0,
      shadowColor: '#66eece',
      hoverCursor: 'pointer'
    },
    mouseEnter (e) {
      this.animation('shape', { endAngle: Math.PI, r: 70 }, true)
      this.animation('style', { shadowBlur: 20, rotate: -30, lineWidth: 30 })
    },
    mouseOuter (e) {
      this.animation('shape', { endAngle: Math.PI / 3, r: 60 }, true)
      this.animation('style', { shadowBlur: 0, rotate: 0, lineWidth: 20 })
    }
  }
}

regPolygon

shape attribute

Attribute name	Type	Default	Annotation
rx	Number	0	Center x-axis coordinate.
ry	Number	0	Center y-axis coordinate.
r	Number	0	Circumradius.
side	Number	0	Edge number.

Click to expand or collapse

export default function (render) {
  const { area: [w, h] } = render

  return {
    name: 'regPolygon',
    animationCurve: 'easeOutBack',
    hover: true,
    drag: true,
    shape: {
      rx: w / 2,
      ry: h / 2,
      r: 60,
      side: 6
    },
    style: {
      fill: '#9ce5f4',
      hoverCursor: 'pointer',
      shadowBlur: 0,
      rotate: 0,
      shadowColor: '#66eece'
    },
    mouseEnter (e) {
      this.animation('shape', { endAngle: Math.PI, r: 100 }, true)
      this.animation('style', { shadowBlur: 20, rotate: 180 })
    },
    mouseOuter (e) {
      this.animation('shape', { endAngle: Math.PI / 3, r: 60 }, true)
      this.animation('style', { shadowBlur: 0, rotate: 0 })
    }
  }
}

polyline

shape attribute

Attribute name	Type	Default	Annotation
points	Array	[]	The points that makes up the polyline.
close	Boolean	false	Whether to close the polyline.

Click to expand or collapse

export default function (render) {
  const { area: [w, h] } = render

  const top = h / 3
  const bottom = h / 3 * 2
  const gap = w / 10

  const beginX = w / 2 - gap * 2

  const points = new Array(5).fill('').map((t, i) =>
    [beginX + gap * i, i % 2 === 0 ? top : bottom])

  return {
    name: 'polyline',
    animationCurve: 'easeOutBack',
    hover: true,
    drag: true,
    shape: {
      points
    },
    style: {
      stroke: '#9ce5f4',
      shadowBlur: 0,
      lineWidth: 10,
      shadowColor: '#66eece',
      hoverCursor: 'pointer'
    },
    mouseEnter (e) {
      this.animation('style', { lineWidth: 20, shadowBlur: 20 })
    },
    mouseOuter (e) {
      this.animation('style', { lineWidth: 10, shadowBlur: 0 })
    }
  }
}

polyline (closed)

Click to expand or collapse

import { deepClone } from '../../CRender/plugin/util'

export default function (render) {
  const { area: [w, h] } = render

  const top = h / 3
  const bottom = h / 3 * 2
  const gap = w / 10

  const beginX = w / 2 - gap * 2

  const points = new Array(5).fill('').map((t, i) =>
    [beginX + gap * i, i % 2 === 0 ? top : bottom])

  points[2][1] += top * 1.3

  return {
    name: 'polyline',
    animationCurve: 'easeOutBack',
    hover: true,
    drag: true,
    shape: {
      points,
      close: true
    },
    style: {
      fill: '#9ce5f4',
      shadowBlur: 0,
      lineWidth: 10,
      shadowColor: '#66eece',
      hoverCursor: 'pointer'
    },
    mouseEnter (e) {
      this.animation('style', { shadowBlur: 20 }, true)
      const pointsCloned = deepClone(this.shape.points)
      pointsCloned[2][1] += top * 0.3
      this.animation('shape', { points: pointsCloned })
    },
    mouseOuter (e) {
      this.animation('style', { shadowBlur: 0 }, true)
      const pointsCloned = deepClone(this.shape.points)
      pointsCloned[2][1] -= top * 0.3
      this.animation('shape', { points: pointsCloned })
    }
  }
}

smoothline

shape attribute

Attribute name	Type	Default	Annotation
points	Array	[]	The points that makes up the smoothline.
close	Boolean	false	Whether to close the smoothline.

Click to expand or collapse

export default function (render) {
  const { area: [w, h] } = render

  const top = h / 3
  const bottom = h / 3 * 2
  const gap = w / 10

  const beginX = w / 2 - gap * 2

  const points = new Array(5).fill('').map((t, i) =>
    [beginX + gap * i, i % 2 === 0 ? top : bottom])

  return {
    name: 'smoothline',
    animationCurve: 'easeOutBack',
    hover: true,
    drag: true,
    shape: {
      points
    },
    style: {
      stroke: '#9ce5f4',
      shadowBlur: 0,
      lineWidth: 10,
      shadowColor: '#66eece',
      hoverCursor: 'pointer'
    },
    mouseEnter (e) {
      this.animation('style', { lineWidth: 20, shadowBlur: 20 })
    },
    mouseOuter (e) {
      this.animation('style', { lineWidth: 10, shadowBlur: 0 })
    }
  }
}

smoothline (closed)

Click to expand or collapse

import { getCircleRadianPoint } from '../../CRender/plugin/util'

function getPoints (radius, centerPoint, pointNum) {
  const PIDived = Math.PI * 2 / pointNum

  const points = new Array(pointNum).fill('')
    .map((foo, i) =>
      getCircleRadianPoint(...centerPoint, radius, PIDived * i)
    )

  return points
}

export default function (render) {
  const { area: [w, h] } = render

  const radius = h / 3
  const centerPoint = [w / 2, h / 2]

  return {
    name: 'smoothline',
    animationCurve: 'easeOutBack',
    hover: true,
    drag: true,
    shape: {
      points: getPoints(radius, centerPoint, 3),
      close: true
    },
    style: {
      fill: '#9ce5f4',
      shadowBlur: 0,
      lineWidth: 10,
      shadowColor: '#66eece',
      hoverCursor: 'pointer'
    },
    mouseEnter (e) {
      this.animation('style', { lineWidth: 20, shadowBlur: 20, rotate: 120 })
    },
    mouseOuter (e) {
      this.animation('style', { lineWidth: 10, shadowBlur: 0, rotate: 0 })
    },
    setGraphCenter (e, { style }) {
      if (e) {
        const { movementX, movementY } = e
        const [cx, cy] = style.graphCenter

        style.graphCenter = [cx + movementX, cy + movementY]
      } else {
        style.graphCenter = [...centerPoint]
      }
    }
  }
}

bezierCurve

shape attribute

Attribute name	Type	Default	Annotation
points	Array	[]	The points that makes up the bezierCurve.
close	Boolean	false	Whether to close the bezierCurve.

Click to expand or collapse

export default function (render) {
  const { area: [w, h] } = render

  const offsetX = w / 2
  const offsetY = h / 2

  const points = [
    // 起始点
    [-100 + offsetX, -50 + offsetY],
    // N组贝塞尔曲线数据
    [
      // 贝塞尔曲线控制点1，控制点2，结束点
      [0  + offsetX, -50 + offsetY],
      [0  + offsetX, 50 + offsetY],
      [100  + offsetX, 50 + offsetY]
    ]
  ]

  return {
    name: 'bezierCurve',
    animationCurve: 'easeOutBack',
    hover: true,
    drag: true,
    shape: {
      points
    },
    style: {
      lineWidth: 10,
      stroke: '#9ce5f4',
      shadowBlur: 0,
      shadowColor: '#66eece',
      hoverCursor: 'pointer'
    },
    mouseEnter (e) {
      this.animation('style', { lineWidth: 20, shadowBlur: 20 })
    },
    mouseOuter (e) {
      this.animation('style', { lineWidth: 10, shadowBlur: 0 })
    }
  }
}

bezierCurve (closed)

Click to expand or collapse

import { getCircleRadianPoint } from '../../CRender/plugin/util'

function getPetalPoints (insideRadius, outsideRadius, petalNum, petalCenter) {
  const PI2Dived = Math.PI * 2 / (petalNum * 3)

  let points = new Array(petalNum * 3).fill('')
    .map((foo, i) => 
      getCircleRadianPoint(...petalCenter,
        i % 3 === 0 ? insideRadius : outsideRadius,
        PI2Dived * i)
    )

  const startPoint = points.shift()
  points.push(startPoint)

  points = new Array(petalNum).fill('')
    .map(foo => points.splice(0, 3))

  points.unshift(startPoint)

  return points
}

export default function (render) {
  const { area: [w, h] } = render

  const petalCenter = [w / 2, h / 2]
  const [raidus1, raidus2, raidus3, raidus4] = [h / 6, h / 2.5, h / 3, h / 2]

  return {
    name: 'bezierCurve',
    animationCurve: 'easeOutBack',
    hover: true,
    drag: true,
    shape: {
      points: getPetalPoints(raidus1, raidus2, 6, petalCenter),
      close: true
    },
    style: {
      fill: '#9ce5f4',
      shadowBlur: 0,
      shadowColor: '#66eece',
      hoverCursor: 'pointer'
    },
    mouseEnter (e, { style: { graphCenter } }) {
      this.animation('style', { lineWidth: 20, shadowBlur: 20 }, true)
      this.animation('shape', { points: getPetalPoints(raidus3, raidus4, 6, graphCenter) })
    },
    mouseOuter (e, { style: { graphCenter } }) {
      this.animation('style', { lineWidth: 10, shadowBlur: 0 }, true)
      this.animation('shape', { points: getPetalPoints(raidus1, raidus2, 6, graphCenter) })
    },
    setGraphCenter (e, { style }) {
      if (e) {
        const { movementX, movementY } = e
        const [cx, cy] = style.graphCenter

        style.graphCenter = [cx + movementX, cy + movementY]
      } else {
        style.graphCenter = [...petalCenter]
      }
    }
  }
}

text

shape attribute

Attribute name	Type	Default	Annotation
content	String	''	Text content.
position	Array	[0, 0]	Text start position.
maxWidth	Number	Undefined	Maximum width of the text.
rowGap	Number	0	Gap between row and row.

Click to expand or collapse

export default function (render) {
  const { area: [w, h] } = render

  const centerPoint = [w / 2, h / 2]

  const hoverRect = [w / 2 - 100, h / 2 - 30 ,200, 60]

  return {
    name: 'text',
    animationCurve: 'easeOutBack',
    hover: true,
    drag: true,
    hoverRect,
    shape: {
      content: 'CRender',
      position: centerPoint,
      maxWidth: 200
    },
    style: {
      fill: '#9ce5f4',
      fontSize: 50,
      shadowBlur: 0,
      rotate: 0,
      shadowColor: '#66eece',
      hoverCursor: 'pointer',
      scale: [1, 1],
      rotate: 0
    },
    mouseEnter (e) {
      this.animation('style', { shadowBlur: 20, scale: [1.5, 1.5], rotate: 30 })
    },
    mouseOuter (e) {
      this.animation('style', { shadowBlur: 0, scale: [1, 1], rotate: 0 })
    },
    moved (e, { hoverRect }) {
      const { movementX, movementY } = e

      hoverRect[0] += movementX
      hoverRect[1] += movementY
    }
  }
}

TIP

Graph of text should be configured with hoverRect to support mouse events.You can use \n to implement multiple lines of text.