v 1.1.0
This commit is contained in:
jiaming743
195
plugins/canvasExtend.js
Normal file
195
plugins/canvasExtend.js
Normal file
@ -0,0 +1,195 @@
|
||||
import { filterNull } from './methodsExtend'
|
||||
|
||||
export function drawLine (ctx, lineBegin, lineEnd, lineWidth = 2, lineColor = '#000', dashArray = [10, 0]) {
|
||||
if (!ctx || !lineBegin || !lineEnd) return
|
||||
|
||||
ctx.beginPath()
|
||||
|
||||
ctx.moveTo(...lineBegin)
|
||||
ctx.lineTo(...lineEnd)
|
||||
|
||||
ctx.closePath()
|
||||
|
||||
ctx.lineWidth = lineWidth
|
||||
ctx.strokeStyle = lineColor
|
||||
ctx.setLineDash(dashArray)
|
||||
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
export function drawPolylinePath (ctx, points, close = false, newPath = false) {
|
||||
if (!ctx || !points.length) return
|
||||
|
||||
newPath && ctx.beginPath()
|
||||
|
||||
points.forEach((point, i) =>
|
||||
point && (i === 0 ? ctx.moveTo(...point) : ctx.lineTo(...point)))
|
||||
|
||||
close && ctx.lineTo(...points[0])
|
||||
}
|
||||
|
||||
export function drawPolyline (ctx, points, lineWidth = 2, lineColor = '#000', close = false, dashArray = [10, 0], newPath = false) {
|
||||
if (!ctx || !points.length) return
|
||||
|
||||
drawPolylinePath(ctx, points, close, newPath)
|
||||
|
||||
ctx.lineWidth = lineWidth
|
||||
ctx.strokeStyle = lineColor
|
||||
ctx.setLineDash(dashArray)
|
||||
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
export function drawSmoothlinePath (ctx, points, close = false, newPath = false, moveTo = false) {
|
||||
const canDrawPoints = filterNull(points)
|
||||
|
||||
if (!ctx || canDrawPoints.length < 2) return
|
||||
|
||||
close && canDrawPoints.push(canDrawPoints[0])
|
||||
|
||||
newPath && ctx.beginPath()
|
||||
|
||||
if (canDrawPoints.length === 2) {
|
||||
ctx.moveTo(...canDrawPoints[0])
|
||||
ctx.lineTo(...canDrawPoints[1])
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
const lastPointIndex = canDrawPoints.length - 1
|
||||
|
||||
moveTo && ctx.moveTo(...canDrawPoints[0])
|
||||
|
||||
canDrawPoints.forEach((t, i) =>
|
||||
(i !== lastPointIndex) && drawBezierCurveLinePath(ctx,
|
||||
...getBezierCurveLineControlPoints(canDrawPoints, i, false),
|
||||
canDrawPoints[i + 1]))
|
||||
}
|
||||
|
||||
export function getBezierCurveLineControlPoints (points, index, close = false, offsetA = 0.25, offsetB = 0.25) {
|
||||
const pointNum = points.length
|
||||
|
||||
if (pointNum < 3 || index >= pointNum) return
|
||||
|
||||
let beforePointIndex = index - 1
|
||||
beforePointIndex < 0 && (beforePointIndex = (close ? pointNum + beforePointIndex : 0))
|
||||
|
||||
let afterPointIndex = index + 1
|
||||
afterPointIndex >= pointNum && (afterPointIndex = (close ? afterPointIndex - pointNum : pointNum - 1))
|
||||
|
||||
let afterNextPointIndex = index + 2
|
||||
afterNextPointIndex >= pointNum && (afterNextPointIndex = (close ? afterNextPointIndex - pointNum : pointNum - 1))
|
||||
|
||||
const pointBefore = points[beforePointIndex]
|
||||
const pointMiddle = points[index]
|
||||
const pointAfter = points[afterPointIndex]
|
||||
const pointAfterNext = points[afterNextPointIndex]
|
||||
|
||||
return [
|
||||
[
|
||||
pointMiddle[0] + offsetA * (pointAfter[0] - pointBefore[0]),
|
||||
pointMiddle[1] + offsetA * (pointAfter[1] - pointBefore[1])
|
||||
],
|
||||
[
|
||||
pointAfter[0] - offsetB * (pointAfterNext[0] - pointMiddle[0]),
|
||||
pointAfter[1] - offsetB * (pointAfterNext[1] - pointMiddle[1])
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
export function drawSmoothline (ctx, points, lineWidth = 2, lineColor = '#000', close = false, dashArray = [10, 0], newPath = false, moveTo = false) {
|
||||
if (!ctx || points.length < 3) return
|
||||
|
||||
drawSmoothlinePath(ctx, points, close, newPath, moveTo)
|
||||
|
||||
ctx.lineWidth = lineWidth
|
||||
ctx.strokeStyle = lineColor
|
||||
ctx.setLineDash(dashArray)
|
||||
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
export function drawBezierCurveLinePath (ctx, ctlBefore, ctlAfter, end, newPath = false) {
|
||||
if (!ctx || !ctlBefore || !ctlAfter || !end) return
|
||||
|
||||
newPath && ctx.beginPath()
|
||||
|
||||
ctx.bezierCurveTo(...ctlBefore, ...ctlAfter, ...end)
|
||||
}
|
||||
|
||||
export function drawPoints (ctx, points, radius = 10, color = '#000') {
|
||||
points.forEach(point => {
|
||||
if (!point) return
|
||||
|
||||
ctx.beginPath()
|
||||
|
||||
ctx.arc(...point, radius, 0, Math.PI * 2)
|
||||
|
||||
ctx.fillStyle = color
|
||||
|
||||
ctx.fill()
|
||||
})
|
||||
}
|
||||
|
||||
export function getLinearGradientColor (ctx, begin, end, color) {
|
||||
if (!ctx || !begin || !end || !color.length) return
|
||||
|
||||
let colors = color
|
||||
|
||||
typeof colors === 'string' && (colors = [color, color])
|
||||
|
||||
const linearGradientColor = ctx.createLinearGradient(...begin, ...end)
|
||||
|
||||
const colorGap = 1 / (colors.length - 1)
|
||||
|
||||
colors.forEach((c, i) => linearGradientColor.addColorStop(colorGap * i, c))
|
||||
|
||||
return linearGradientColor
|
||||
}
|
||||
|
||||
export function getRadialGradientColor (ctx, origin, begin = 0, end = 100, color) {
|
||||
if (!ctx || !origin || !color.length) return
|
||||
|
||||
let colors = color
|
||||
|
||||
typeof colors === 'string' && (colors = [color, color])
|
||||
|
||||
const radialGradientColor = ctx.createRadialGradient(...origin, begin, ...origin, end)
|
||||
|
||||
const colorGap = 1 / (colors.length - 1)
|
||||
|
||||
colors.forEach((c, i) => radialGradientColor.addColorStop(colorGap * i, c))
|
||||
|
||||
return radialGradientColor
|
||||
}
|
||||
|
||||
export function getCircleRadianPoint (x, y, radius, radian) {
|
||||
const { sin, cos } = Math
|
||||
|
||||
return [x + cos(radian) * radius, y + sin(radian) * radius]
|
||||
}
|
||||
|
||||
export function getTextsWidth (ctx, texts) {
|
||||
if (!ctx || !texts) return
|
||||
|
||||
return texts.map(text => ctx.measureText(text).width)
|
||||
}
|
||||
|
||||
const canvas = {
|
||||
drawLine,
|
||||
drawPolylinePath,
|
||||
drawPolyline,
|
||||
getBezierCurveLineControlPoints,
|
||||
drawSmoothlinePath,
|
||||
drawSmoothline,
|
||||
drawBezierCurveLinePath,
|
||||
drawPoints,
|
||||
getLinearGradientColor,
|
||||
getRadialGradientColor,
|
||||
getCircleRadianPoint,
|
||||
getTextsWidth
|
||||
}
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.prototype.canvas = canvas
|
||||
}
|
||||
53
plugins/colorExtend.js
Normal file
53
plugins/colorExtend.js
Normal file
@ -0,0 +1,53 @@
|
||||
const hexReg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
|
||||
const rgbReg = /^(rgb|rgba|RGB|RGBA)/
|
||||
|
||||
/**
|
||||
* @description hex color to rgb / rgba color
|
||||
* @param {string} rgba opacity
|
||||
* @return {string} rgb / rgba color
|
||||
*/
|
||||
export function hexToRgb (hex, opacity) {
|
||||
if (!hex || !hexReg.test(hex)) return false
|
||||
|
||||
hex = hex.toLowerCase().replace('#', '')
|
||||
|
||||
// deal 3bit hex color to 6bit hex color
|
||||
hex.length === 3 && (hex = Array.from(hex).map(hexNum => hexNum + hexNum).join(''))
|
||||
|
||||
let rgb = []
|
||||
|
||||
for (let i = 0; i < 6; i += 2) {
|
||||
rgb.push(parseInt(`0x${hex.slice(i, i + 2)}`))
|
||||
}
|
||||
|
||||
rgb = rgb.join(',')
|
||||
|
||||
if (opacity) {
|
||||
return `rgba(${rgb}, ${opacity})`
|
||||
} else {
|
||||
return `rgb(${rgb})`
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description rgb / rgba color to hex color
|
||||
* @return {string} hex color
|
||||
*/
|
||||
export function rgbToHex (rgb) {
|
||||
if (!rgb || !rgbReg.test(rgb)) return false
|
||||
|
||||
rgb = rgb.toLowerCase().replace(/rgb\(|rgba\(|\)/g, '').split(',').slice(0, 3)
|
||||
|
||||
const hex = rgb.map((rgbNum) => Number(rgbNum).toString(16)).map((rgbNum) => rgbNum === '0' ? rgbNum + rgbNum : rgbNum).join('')
|
||||
|
||||
return `#${hex}`
|
||||
}
|
||||
|
||||
const color = {
|
||||
hexToRgb,
|
||||
rgbToHex
|
||||
}
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.prototype.color = color
|
||||
}
|
||||
11
plugins/index.js
Normal file
11
plugins/index.js
Normal file
@ -0,0 +1,11 @@
|
||||
import methodsExtend from './methodsExtend'
|
||||
|
||||
import canvasExtend from './canvasExtend'
|
||||
|
||||
import colorExtend from './colorExtend'
|
||||
|
||||
export default function (Vue) {
|
||||
methodsExtend(Vue)
|
||||
canvasExtend(Vue)
|
||||
colorExtend(Vue)
|
||||
}
|
||||
155
plugins/methodsExtend.js
Normal file
155
plugins/methodsExtend.js
Normal file
@ -0,0 +1,155 @@
|
||||
const { parse, stringify } = JSON
|
||||
|
||||
export function deepClone (object) {
|
||||
return parse(stringify(object))
|
||||
}
|
||||
|
||||
export function deleteArrayAllItems (arrays) {
|
||||
arrays.forEach(element => element.splice(0, element.length))
|
||||
}
|
||||
|
||||
export function debounce (delay, callback) {
|
||||
let lastTime
|
||||
|
||||
return function () {
|
||||
clearTimeout(lastTime)
|
||||
|
||||
const [that, args] = [this, arguments]
|
||||
|
||||
lastTime = setTimeout(() => {
|
||||
callback.apply(that, args)
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
|
||||
export function randomExtend (minNum, maxNum) {
|
||||
if (arguments.length === 1) {
|
||||
return parseInt(Math.random() * minNum + 1, 10)
|
||||
} else {
|
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
||||
}
|
||||
}
|
||||
|
||||
export function multipleSum (...num) {
|
||||
let sum = 0
|
||||
|
||||
num.forEach(n => (sum += n))
|
||||
|
||||
return sum
|
||||
}
|
||||
|
||||
export function filterNull (arr) {
|
||||
const tmpArr = []
|
||||
|
||||
arr.forEach(v => ((v || v === 0) && tmpArr.push(v)))
|
||||
|
||||
return tmpArr
|
||||
}
|
||||
|
||||
export function getPointDistance (pointOne, pointTwo) {
|
||||
const minusX = Math.abs(pointOne[0] - pointTwo[0])
|
||||
|
||||
const minusY = Math.abs(pointOne[1] - pointTwo[1])
|
||||
|
||||
return Math.sqrt(minusX * minusX + minusY * minusY)
|
||||
}
|
||||
|
||||
export function getPointToLineDistance (point, linePointOne, linePointTwo) {
|
||||
const a = getPointDistance(point, linePointOne)
|
||||
const b = getPointDistance(point, linePointTwo)
|
||||
const c = getPointDistance(linePointOne, linePointTwo)
|
||||
|
||||
return 0.5 * Math.sqrt((a + b + c) * (a + b - c) * (a + c - b) * (b + c - a)) / c
|
||||
}
|
||||
|
||||
export function getArrayMaxMin (array) {
|
||||
if (!array) return false
|
||||
|
||||
return [getArrayMax(array), getArrayMin(array)]
|
||||
}
|
||||
|
||||
export function getArrayMax (array) {
|
||||
if (!array) return false
|
||||
|
||||
return Math.max(...filterNull(array).map(n =>
|
||||
n instanceof Array ? getArrayMax(n) : n))
|
||||
}
|
||||
|
||||
export function getArrayMin (array) {
|
||||
if (!array) return false
|
||||
|
||||
return Math.min(...filterNull(array).map(n =>
|
||||
n instanceof Array ? getArrayMin(n) : n))
|
||||
}
|
||||
|
||||
export function getAxisPointsPos ([max, min], values, axisOriginPos, axisWH, tagPos, horizon) {
|
||||
let minus = max - min
|
||||
|
||||
minus === 0 && (minus = 1)
|
||||
|
||||
return values.map((value, i) => {
|
||||
if (!value && value !== 0) return false
|
||||
|
||||
if (value instanceof Array) {
|
||||
return value.map(v =>
|
||||
getAxisPointPos([max, min], v, axisOriginPos, axisWH, tagPos[i], horizon))
|
||||
}
|
||||
|
||||
const percent = (value - min) / minus
|
||||
|
||||
const length = percent * (horizon ? axisWH[0] : axisWH[1])
|
||||
|
||||
return horizon ? [
|
||||
axisOriginPos[0] + length,
|
||||
tagPos[i][1]
|
||||
] : [
|
||||
tagPos[i][0],
|
||||
axisOriginPos[1] - length
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
export function getAxisPointPos ([max, min], value, axisOriginPos, axisWH, tagPos, horizon) {
|
||||
if (!value && value !== 0) return false
|
||||
|
||||
const minus = max - min
|
||||
|
||||
const percent = (value - min) / minus
|
||||
|
||||
const length = percent * (horizon ? axisWH[0] : axisWH[1])
|
||||
|
||||
return horizon ? [
|
||||
axisOriginPos[0] + length,
|
||||
tagPos[1]
|
||||
] : [
|
||||
tagPos[0],
|
||||
axisOriginPos[1] - length
|
||||
]
|
||||
}
|
||||
|
||||
export function observerDomResize (dom, callback) {
|
||||
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
|
||||
|
||||
const observer = new MutationObserver(callback)
|
||||
|
||||
observer.observe(dom, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })
|
||||
|
||||
return observer
|
||||
}
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.prototype.deepClone = deepClone
|
||||
Vue.prototype.deleteArrayAllItems = deleteArrayAllItems
|
||||
Vue.prototype.debounce = debounce
|
||||
Vue.prototype.multipleSum = multipleSum
|
||||
Vue.prototype.randomExtend = randomExtend
|
||||
Vue.prototype.filterNull = filterNull
|
||||
Vue.prototype.getPointDistance = getPointDistance
|
||||
Vue.prototype.getPointToLineDistance = getPointToLineDistance
|
||||
Vue.prototype.getArrayMaxMin = getArrayMaxMin
|
||||
Vue.prototype.getArrayMax = getArrayMax
|
||||
Vue.prototype.getArrayMin = getArrayMin
|
||||
Vue.prototype.getAxisPointPos = getAxisPointPos
|
||||
Vue.prototype.getAxisPointsPos = getAxisPointsPos
|
||||
Vue.prototype.observerDomResize = observerDomResize
|
||||
}
|
||||
Reference in New Issue
Block a user