基础图形

插件内置了丰富的基础图形，如下是相关实例，你还可以尝试拖拽他们。

圆形

shape属性表

属性名	类型	默认值	注解
rx	Number	0	圆心x轴坐标
ry	Number	0	圆心y轴坐标
r	Number	0	圆半径

点击以展开或折叠

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 })
    }
  }
}

椭圆形

shape属性表

属性名	类型	默认值	注解
rx	Number	0	圆心x轴坐标
ry	Number	0	圆心y轴坐标
hr	Number	0	横轴半径
vr	Number	0	竖轴半径

点击以展开或折叠

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 })
    }
  }
}

矩形

shape属性表

属性名	类型	默认值	注解
x	Number	0	矩形左上角x轴坐标
y	Number	0	矩形左上角y轴坐标
w	Number	0	矩形宽度
h	Number	0	矩形高度

点击以展开或折叠

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] })
    }
  }
}

环形

shape属性表

属性名	类型	默认值	注解
rx	Number	0	中心点x轴坐标
ry	Number	0	中心点y轴坐标
r	Number	0	环半径

点击以展开或折叠

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 })
    }
  }
}

弧形

shape属性表

属性名	类型	默认值	注解
rx	Number	0	中心点x轴坐标
ry	Number	0	中心点y轴坐标
r	Number	0	弧半径
startAngle	Number	0	弧起始弧度值
endAngle	Number	0	弧结束弧度值
clockWise	Boolean	true	是否顺时针

点击以展开或折叠

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 })
    }
  }
}

扇形

shape属性表

属性名	类型	默认值	注解
rx	Number	0	中心点x轴坐标
ry	Number	0	中心点y轴坐标
r	Number	0	扇形半径
startAngle	Number	0	扇形起始弧度值
endAngle	Number	0	扇形结束弧度值
clockWise	Boolean	true	是否顺时针

点击以展开或折叠

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 })
    }
  }
}

正多边形

shape属性表

属性名	类型	默认值	注解
rx	Number	0	中心点x轴坐标
ry	Number	0	中心点y轴坐标
r	Number	0	外接圆半径
side	Number	0	边数

点击以展开或折叠

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 })
    }
  }
}

折线

shape属性表

属性名	类型	默认值	注解
points	Array	[]	构成折线的点
close	Boolean	false	是否闭合折线

点击以展开或折叠

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 })
    }
  }
}

折线（闭合）

点击以展开或折叠

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 })
    }
  }
}

光滑曲线

shape属性表

属性名	类型	默认值	注解
points	Array	[]	构成光滑曲线的点
close	Boolean	false	是否闭合光滑曲线

点击以展开或折叠

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 })
    }
  }
}

光滑曲线（闭合）

点击以展开或折叠

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]
      }
    }
  }
}

贝塞尔曲线

shape属性表

属性名	类型	默认值	注解
points	Array	[]	构成贝塞尔曲线的点
close	Boolean	false	是否闭合贝塞尔曲线

点击以展开或折叠

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 })
    }
  }
}

贝塞尔曲线（闭合）

点击以展开或折叠

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]
      }
    }
  }
}

文本

shape属性表

属性名	类型	默认值	注解
content	String	''	文本内容
position	Array	[0, 0]	文本起始位置
maxWidth	Number	Undefined	文本最大宽度
rowGap	Number	0	行间距

点击以展开或折叠

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

图形text的鼠标事件依赖hoverRect属性，如需鼠标事件生效请对其配置。文本中插入\n可以进行换行。