suyiScreen/node_modules/@jiaminghi/c-render

中文

CRender

What is CRender?

• It's a vector graphics rendering plugin based on canvas.
• It provides animation and mouse event support for graphics.

Install with npm

$ npm install @jiaminghi/c-render

Quick experience

<!--Resources are located on personal servers for experience and testing only, do not use in production environments-->
<!--Debug version-->
<script src="http://lib.jiaminghi.com/crender/crender.map.js"></script>
<!--Compression version-->
<script src="http://lib.jiaminghi.com/crender/crender.min.js"></script>
<script>
  const { CRender, extendNewGraph } = window.CRender
  // do something
</script>

Detailed documents and examples can be viewed on the HomePage.

• Use
• Class CRender
• Class Graph
• Class Style
• Examples
• Extend New Graph
• Related support

---

Use

import CRender from '@jiaminghi/c-redner'

const canvas = document.getElementById('canvas')

// Instantiate CRender
const render = new CRender(canvas)

// Add graph to render
const circle = render.add({ name: 'circle', ... })

Class CRender

Class

/**
 * @description Class of CRender
 * @param {Object} canvas Canvas DOM
 * @return {CRender} Instance of CRender
 */
class CRender {
    // ...
}

properties

• ctx
• area
• animationStatus
• graphs
• color
• bezierCurve

ctx

/**
 * @description Context of the canvas
 * @type {Object}
 * @example ctx = canvas.getContext('2d')
 */

area

/**
 * @description Width and height of the canvas
 * @type {Array<Number>}
 * @example area = [300，100]
 */

animationStatus

/**
 * @description Whether render is in animation rendering
 * @type {Boolean}
 * @example animationStatus = true|false
 */

graphs

/**
 * @description Added graph
 * @type {Array<Graph>}
 * @example graphs = [Graph, Graph, ...]
 */

color

/**
 * @description Color plugin
 * @type {Object}
 */

bezierCurve

/**
 * @description Bezier Curve plugin
 * @type {Object}
 */

prototype

• add

  Add graph to render.

• clone

  Clone Graph.

• delGraph

  Delete graph in render.

• delAllGraph

  Delete all graph in render.

• drawAllGraph

  Draw all the graphs in the render.

• clearArea

  Clear canvas drawing area.

• launchAnimation

  Animate the graph whose animation queue is not empty and the animationPause is equal to false.

add

/**
 * @description Add graph to render
 * @param {Object} config Graph configuration
 * @return {Graph} Graph instance
 */
CRender.prototype.add = function (config = {}) {
	// ...
}

Clone

/**
 * @description Clone Graph
 * @param {Graph} graph The target to be cloned
 * @return {Graph} Cloned graph
 */
CRender.prototype.clone = function (graph) {
}

delGraph

/**
 * @description Delete graph in render
 * @param {Graph} graph The graph to be deleted
 * @return {Undefined} Void
 */
CRender.prototype.delGraph = function (graph) {
	// ...
}

delAllGraph

/**
 * @description Delete all graph in render
 * @return {Undefined} Void
 */
CRender.prototype.delAllGraph = function () {
	// ...
}

drawAllGraph

/**
 * @description Draw all the graphs in the render
 * @return {Undefined} Void
 */
CRender.prototype.drawAllGraph = function () {
    // ...
}

clearArea

/**
 * @description Clear canvas drawing area
 * @return {Undefined} Void
 */
CRender.prototype.clearArea = function () {
	// ...
}

launchAnimation

/**
 * @description Animate the graph whose animation queue is not empty
 *  and the animationPause is equal to false
 * @return {Promise} Animation Promise
 */
CRender.prototype.launchAnimation = function () {
	// ...
}

Class Graph

properties

When adding a graph, you can configure them.

• visible
• shape
• style
• drag
• hover
• index
• animationDelay
• animationFrame
• animationCurve
• animationPause
• hoverRect
• mouseEnter
• mouseOuter
• click

visible

/**
 * @description Weather to render graph
 * @type {Boolean}
 * @default visible = true
 */

shape

/**
 * @description Graph shape data
 * @type {Object}
 */

style

/**
 * @description Graph style data (Instance of Style)
 * @type {Style}
 */

drag

/**
 * @description Whether to enable drag
 * @type {Boolean}
 * @default drag = false
 */

hover

/**
 * @description Whether to enable hover
 * @type {Boolean}
 * @default hover = false
 */

index

/**
 * @description Graph rendering index
 *  Give priority to index high graph in rendering
 * @type {Number}
 * @default index = 1
 */

animationDelay

/**
 * @description Animation delay time(ms)
 * @type {Number}
 * @default animationDelay = 0
 */

animationFrame

/**
 * @description Number of animation frames
 * @type {Number}
 * @default animationFrame = 30
 */

animationCurve

/**
 * @description Animation easing curve
 * @type {String}
 * @default animationCurve = 'linear'
 */

animationPause

/**
 * @description Weather to pause graph animation
 * @type {Boolean}
 * @default animationPause = false
 */

hoverRect

/**
 * @description Rectangular hover detection zone
 *  Use this method for hover detection first
 * @type {Null|Array<Number>}
 * @default hoverRect = null
 * @example hoverRect = [0, 0, 100, 100] // [Rect start x, y, Rect width, height]
 */

mouseEnter

/**
 * @description Mouse enter event handler
 * @type {Null|Function}
 * @default mouseEnter = null
  */

mouseOuter

/**
 * @description Mouse outer event handler
 * @type {Null|Function}
 * @default mouseOuter = null
 */

click

/**
 * @description Mouse click event handler
 * @type {Null|Function}
 * @default click = null
 */

Tip

Enable mouseEnter, mouseOuter, click event support requires configuring the hover property of the graph to true. Extended new graph require the hoverCheck method to be configured to provide event support.

prototype

• attr

  Update graph state.

• animation

  Update graphics state (with animation).

• animationEnd

  Skip to the last frame of animation.

• pauseAnimation

  Pause animation behavior.

• playAnimation

  Try animation behavior.

attr

/**
 * @description Update graph state
 * @param {String} attrName Updated attribute name
 * @param {Any} change      Updated value
 * @return {Undefined} Void
 */
Graph.prototype.attr = function (attrName, change = undefined) {
	// ...
}

animation

/**
 * @description Update graphics state (with animation)
 *  Only shape and style attributes are supported
 * @param {String} attrName Updated attribute name
 * @param {Any} change      Updated value
 * @param {Boolean} wait    Whether to store the animation waiting
 * 							for the next animation request
 * @return {Promise} Animation Promise
 */
Graph.prototype.animation = async function (attrName, change, wait = false) {
	// ...
}

animationEnd

/**
 * @description Skip to the last frame of animation
 * @return {Undefined} Void
 */
Graph.prototype.animationEnd = function () {
  // ...
}

pauseAnimation

/**
 * @description Pause animation behavior
 * @return {Undefined} Void
 */
Graph.prototype.pauseAnimation = function () {
  // ...
}

playAnimation

/**
 * @description Try animation behavior
 * @return {Undefined} Void
 */
Graph.prototype.playAnimation = function () {
  // ...
}

Life Cycle

When you add graph to the render, you can configure the following functions in the configuration, they will be called at a specific time.

• added

  Called after the graphics are added.

• beforeDraw

  Called before the drawing is drawn.

• drawed

  Called after the drawing is completed

• beforeMove

  Called before moving the graphic.

• moved

  Called after moving the graphic.

• beforeDelete

  Called before deleting the graphic.

• deleted

  Called after the graphic is deleted.

added

/**
 * @description Called after the graphics are added
 * @param {Graph} Graph instance
 */
config = {
  //...,
  added ({ shape, style }) {
    // do something...
  }
}

beforeDraw

/**
 * @description Called before the drawing is drawn,
 *  the graphic style has been initialized.
 *  You can modify the ctx property before drawing.
 * @param {Graph} Graph instance
 * @param {CRender} CRender instance
 */
config = {
  //...,
  beforeDraw ({ shape, style }, { ctx }) {
    // do something...
    ctx.stroke = 'transparent'
  }
}

drawed

/**
 * @description Called after the drawing is completed
 * @param {Graph} Graph instance
 * @param {CRender} CRender instance
 */
config = {
  //...,
  drawed ({ shape, style }, { ctx }) {
    // do something...
  }
}

beforeMove

/**
 * @description Called before moving the graphic,
 *  before the drag behavior occurs
 * @param {Event} Mouse event
 * @param {Graph} Graph instance
 */
config = {
  //...,
  beforeMove ({ offsetX, offsetY }, { shape, style }) {
    // do something...
  }
}

moved

/**
 * @description Called after moving the graphic,
 *  after the drag behavior occurs
 * @param {Event} Mouse event
 * @param {Graph} Graph instance
 */
config = {
  //...,
  moved ({ offsetX, offsetY }, { shape, style }) {
    // do something...
  }
}

beforeDelete

/**
 * @description Called before deleting the graphic
 * @param {Graph} Graph instance
 */
config = {
  //...,
  beforeDelete ({ shape, style }) {
    // do something...
  }
}

deleted

/**
 * @description Called after the graphic is deleted
 * @param {Graph} Graph instance
 */
config = {
  //...,
  deleted ({ shape, style }) {
    // do something...
  }
}

Class Style

properties

• fill
• stroke
• opacity
• lineCap
• lineJoin
• lineDash
• lineDashOffset
• shadowBlur
• shadowColor
• shadowOffsetX
• shadowOffsetY
• lineWidth
• graphCenter
• scale
• rotate
• translate
• hoverCursor
• fontStyle
• fontVarient
• fontWeight
• fontSize
• fontFamily
• textAlign
• textBaseline
• gradientColor
• gradientType
• gradientParams
• gradientWith
• gradientStops
• colors

fill

/**
 * @description Rgba value of graph fill color 
 * @type {Array<Number>}
 * @default fill = [0, 0, 0, 1]
 */

stroke

/**
 * @description Rgba value of graph stroke color 
 * @type {Array<Number>}
 * @default stroke = [0, 0, 0, 1]
 */

opacity

/**
 * @description Opacity of graph
 * @type {Number}
 * @default opacity = 1
 */

lineCap

/**
 * @description LineCap of Ctx
 * @type {Null|String}
 * @default lineCap = null
 * @example lineCap = 'butt'|'round'|'square'
 */

lineJoin

/**
 * @description Linejoin of Ctx
 * @type {Null|String}
 * @default lineJoin = null
 * @example lineJoin = 'round'|'bevel'|'miter'
 */

lineDash

/**
 * @description LineDash of Ctx
 * @type {Null|Array<Number>}
 * @default lineDash = null
 * @example lineDash = [10, 10]
 */

lineDashOffset

/**
 * @description LineDashOffset of Ctx
 * @type {Null|Number}
 * @default lineDashOffset = null
 * @example lineDashOffset = 10
 */

shadowBlur

/**
 * @description ShadowBlur of Ctx
 * @type {Number}
 * @default shadowBlur = 0
 */

shadowColor

/**
 * @description Rgba value of graph shadow color 
 * @type {Array<Number>}
 * @default shadowColor = [0, 0, 0, 0]
 */

shadowOffsetX

/**
 * @description ShadowOffsetX of Ctx
 * @type {Number}
 * @default shadowOffsetX = 0
 */

shadowOffsetY

/**
 * @description ShadowOffsetY of Ctx
 * @type {Number}
 * @default shadowOffsetY = 0
 */

lineWidth

/**
 * @description LineWidth of Ctx
 * @type {Number}
 * @default lineWidth = 0
 */

graphCenter

/**
 * @description Center point of the graph
 * @type {Null|Array<Number>}
 * @default graphCenter = null
 * @example graphCenter = [10, 10]
 */

scale

/**
 * @description Graph scale
 * @type {Null|Array<Number>}
 * @default scale = null
 * @example scale = [1.5, 1.5]
 */

rotate

/**
 * @description Graph rotation degree
 * @type {Null|Number}
 * @default rotate = null
 * @example rotate = 10
 */

translate

/**
 * @description Graph translate distance
 * @type {Null|Array<Number>}
 * @default translate = null
 * @example translate = [10, 10]
 */

hoverCursor

/**
 * @description Cursor status when hover
 * @type {String}
 * @default hoverCursor = 'pointer'
 * @example hoverCursor = 'default'|'pointer'|'auto'|'crosshair'|'move'|'wait'|...
 */

fontStyle

/**
 * @description Font style of Ctx
 * @type {String}
 * @default fontStyle = 'normal'
 * @example fontStyle = 'normal'|'italic'|'oblique'
 */

fontVarient

/**
 * @description Font varient of Ctx
 * @type {String}
 * @default fontVarient = 'normal'
 * @example fontVarient = 'normal'|'small-caps'
 */

fontWeight

/**
 * @description Font weight of Ctx
 * @type {String|Number}
 * @default fontWeight = 'normal'
 * @example fontWeight = 'normal'|'bold'|'bolder'|'lighter'|Number
 */

fontSize

/**
 * @description Font size of Ctx
 * @type {Number}
 * @default fontSize = 10
 */

fontFamily

/**
 * @description Font family of Ctx
 * @type {String}
 * @default fontFamily = 'Arial'
 */

textAlign

/**
 * @description TextAlign of Ctx
 * @type {String}
 * @default textAlign = 'center'
 * @example textAlign = 'start'|'end'|'left'|'right'|'center'
 */

textBaseline

/**
 * @description TextBaseline of Ctx
 * @type {String}
 * @default textBaseline = 'middle'
 * @example textBaseline = 'top'|'bottom'|'middle'|'alphabetic'|'hanging'
 */

gradientColor

/**
 * @description The color used to create the gradient
 * @type {Null|Array<String>}
 * @default gradientColor = null
 * @example gradientColor = ['#000', '#111', '#222']
 */

gradientType

/**
 * @description Gradient type
 * @type {String}
 * @default gradientType = 'linear'
 * @example gradientType = 'linear' | 'radial'
 */

gradientParams

/**
 * @description Gradient params
 * @type {Array<Number>}
 * @default gradientParams = null
 * @example gradientParams = [x0, y0, x1, y1] (Linear Gradient)
 * @example gradientParams = [x0, y0, r0, x1, y1, r1] (Radial Gradient)
 */

gradientWith

/**
 * @description When to use gradients
 * @type {String}
 * @default gradientWith = 'stroke'
 * @example gradientWith = 'stroke' | 'fill'
 */

gradientStops

/**
 * @description Gradient color stops
 * @type {String|Array<Number>}
 * @default gradientStops = 'auto'
 * @example gradientStops = 'auto' | [0, .2, .3, 1]
 */

colors

/**
 * @description Extended color that supports animation transition
 * @type {Array<String>|Object}
 * @default colors = null
 * @example colors = ['#000', '#111', '#222']
 * @example colors = { a: '#000', b: '#111' }
 */

Tip

Gradient is automatically enabled when gradientColor and gradientParams are configured.

prototype

• getStyle

  Get the current style configuration.

getStyle

/**
 * @description Get the current style configuration
 * @return {Object} Style configuration
 */
Style.prototype.getStyle = function () {
}

Examples

CRender provides some basic vector graph, examples are as follows.

• circle
• ellipse
• rect
• ring
• arc
• sector
• regPolygon
• polyline
• polyline (closed)
• smoothline
• smoothline (closed)
• bezierCurve
• bezierCurve (closed)
• text

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.

const { area: [w, h] } = render

const circleConfig = {
  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 })
  }
}

const circle = render.add(circleConfig)

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.

const { area: [w, h] } = render

const ellipseConfig = {
  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 })
  }
}

const ellipse = render.add(ellipseConfig)

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.

const { area: [w, h] } = render

const rectConfig = {
  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] })
  }
}

const rect = render.add(rectConfig)

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.

const { area: [w, h] } = render

const ringConfig = {
  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 })
  }
}

const ring = render.add(ringConfig)

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

const { area: [w, h] } = render

const arcConfig = {
  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 })
  }
}

const arc = render.add(arcConfig)

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

const { area: [w, h] } = render

const sectorConfig = {
  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 })
  }
}

const sector = render.add(sectorConfig)

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.

const { area: [w, h] } = render

const regPolygonConfig = {
  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 })
  }
}

const regPolygon = render.add(regPolygonConfig)

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.

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

const polylineConfig = {
  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 })
  }
}

const polyline = render.add(polylineConfig)

polyline (closed)

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

const polylineClosedConfig = {
  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 })
  }
}

const polylineClosed = render.add(polylineClosedConfig)

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.

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

const smoothlineConfig = {
  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 })
  }
}

const smoothline = render.add(smoothlineConfig)

smoothline (closed)

import { getCircleRadianPoint } from '../../CRender/lib/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
}

const { area: [w, h] } = render

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

const smoothlineClosedConfig = {
  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]
    }
  }
}

const smoothlineClosed = render.add(smoothlineClosedConfig)

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.

const { area: [w, h] } = render

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

const points = [
  // Start point
  [-100 + offsetX, -50 + offsetY],
  // Multiple sets of bezier curve
  [
    // controlPoint1,controlPoint2,endPoint
    [0  + offsetX, -50 + offsetY],
    [0  + offsetX, 50 + offsetY],
    [100  + offsetX, 50 + offsetY]
  ],
  // [...],[...]
]

const bezierCurveConfig = {
  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 })
  }
}

const bezierCurve = render.add(bezierCurveConfig)

bezierCurve (closed)

import { getCircleRadianPoint } from '../../CRender/lib/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
}

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]

const bezierCurveClosedConfig = {
  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]
    }
  }
}

const bezierCurveClosed = render.add(bezierCurveClosedConfig)

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.

const { area: [w, h] } = render

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

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

const textConfig = {
  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
  }
}

const text = render.add(textConfig)

Tip

• Graph of text should be configured with hoverRect to support mouse events.

• You can use \n to implement multiple lines of text.

Extend New Graph

CRender provides a Function to extend new graph,you can customize the graphics you want.

import { extendNewGraph } from '@jiaminghi/c-render'

const graphName = 'newGraph'
const graphConfig = {
  shape: { ... },
  // ...
}

extendNewGraph(graphName, graphConfig)

extendNewGraph

/**
 * @description Extend new graph
 * @param {String} name   Name of Graph
 * @param {Object} config Configuration of Graph
 * @return {Undefined} Void
 */
function extendNewGraph (name, config) {
  // ...
}

Graph Configuration Properties

• shape
• validator
• draw
• hoverCheck
• setGraphCenter
• move
• example of extend new graph

shape (Required)

/**
 * @type {Object}
 * @description Graph shape data
 */
config = {
  // ...,
  shape: {
    // some property...
  }
}

validator (Required)

/**
 * @type {Function}
 * @description Graph configuration check
 * Automatically invoked when the graph is added,
 * and when the return value is false,
 * the add behavior is terminated.
 * @param {Graph} Current graph instance
 * @return {Boolean} Whether the configuration is legal
 */
config = {
  // ...,
  validator ({ shape }) {
    // check configuration...
    // return true | false
  }
}

draw (Required)

/**
 * @type {Function}
 * @description Graph plotter
 * @param {CRender} Current CRender instance
 * @param {Graph}   Current graph instance
 * @return {Undefined} Void
 */
config = {
  // ...,
  draw ({ ctx }, { shape }) {
    // drawing...
  }
}

hoverCheck (Optional)

/**
 * @type {Function}
 * @description According to the mouse event to detect
 *  whether the current graphics are in the hover state,
 *  support for mouseEnter, mouseOuter, drag, click.
 * @param {Array<Number>} Position of mouse
 * @param {Graph}         Current graph instance
 * @return {Boolean} Whether it is in hover
 */
config = {
  // ...,
  validator ([offsetX, offsetY], { shape }) {
    // Check if it is in hover state...
    // return true | false
  }
}

setGraphCenter (Optional)

/**
 * @type {Function}
 * @description Set the center point of the graph to
 *  support rotate, scale and translate.
 *  Add graph and drag behavior will be called.
 * @param {Event} Mouse move Event (Called when adding a graphic, the value is null)
 * @param {Graph} Current graph instance
 * @return {Undefined} Void
 */
config = {
  // ...,
  setGraphCenter ([offsetX, offsetY], { style }) {
    // style.graphCenter = [offsetX, offsetY]
  }
}

move (Optional)

/**
 * @type {Function}
 * @description Moving graph,support for drag
 * @param {Event} Mouse move Event
 * @param {Graph} Current graph instance
 * @return {Undefined} Void
 */
config = {
  // ...,
  move ([offsetX, offsetY], { shape }) {
    // do something...
  }
}

example of extend new graph

import { extendNewGraph } from '@jiaminghi/c-render'

const circle = {
  shape: {
    rx: 0,
    ry: 0,
    r: 0
  },

  validator ({ shape }) {
    const { rx, ry, r } = shape

    if (typeof rx !== 'number' || typeof ry !== 'number' || typeof r !== 'number') {
      console.error('Shape configuration is abnormal!')

      return false
    }

    return true
  },

  draw ({ ctx }, { shape }) {
    ctx.beginPath()

    const { rx, ry, r } = shape

    ctx.arc(rx, ry, r, 0, Math.PI * 2)

    ctx.fill()
    ctx.stroke()

    ctx.closePath()
  },

  hoverCheck (position, { shape }) {
    const { rx, ry, r } = shape

    return checkPointIsInCircle(rx, ry, r, position)
  },

  setGraphCenter (e, { shape, style }) {
    const { rx, ry } = shape

    style.graphCenter = [rx, ry]
  },

  move ({ movementX, movementY }, { shape }) {
    this.attr('shape', {
      rx: shape.rx + movementX,
      ry: shape.ry + movementY
    })
  }
}

extendNewGraph('circle', circle)

Related support

• Transition

  Provide animation transition data (animationCurve).

  If you want to expand the new easing curve, please move Extend New Easing Curve.

• BezierCurve

  Provides support for bezierCurve, such as curve length calculation, conversion between curve and polyline.

• Color

  Color calculations are provided, such as obtaining the rgba value of the color to facilitate the calculation of the color animation state.