You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

40 KiB

Raw Blame History Unescape Escape

中文

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 {
    // ...
}

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
 */

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.

40 KiB Raw Blame History Unescape Escape

CRender

What is CRender?

Install with npm

Quick experience

Use

Class CRender

Class

properties

ctx

area

animationStatus

graphs

color

bezierCurve

prototype

add

Clone

delGraph

delAllGraph

drawAllGraph

clearArea

launchAnimation

Class Graph

properties

visible

shape

style

drag

hover

index

animationDelay

animationFrame

animationCurve

animationPause

hoverRect

mouseEnter

mouseOuter

click

Tip

prototype

attr

animation

animationEnd

pauseAnimation

playAnimation

Life Cycle

added

beforeDraw

drawed

beforeMove

moved

beforeDelete

deleted

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

40 KiB

Raw Blame History Unescape Escape