|
|
import beziercurve from '../bezier-curve'
|
|
|
import {
|
|
|
calcLength,
|
|
|
getPointOnQuadraticBezier,
|
|
|
getTensionPointsClosed,
|
|
|
expandPoints
|
|
|
} from '../bezier-curve/core/path2d'
|
|
|
|
|
|
import {
|
|
|
deepClone,
|
|
|
eliminateBlur,
|
|
|
checkPointIsInCircle,
|
|
|
getTwoPointDistance,
|
|
|
checkPointIsInSector,
|
|
|
getRegularPolygonPoints,
|
|
|
checkPointIsInPolygon,
|
|
|
checkPointIsNearPolyline,
|
|
|
checkPointIsInRect
|
|
|
} from '../plugin/util'
|
|
|
|
|
|
import {
|
|
|
drawPolylinePath,
|
|
|
drawBezierCurvePath
|
|
|
} from '../plugin/canvas'
|
|
|
|
|
|
const {
|
|
|
polylineToBezierCurve,
|
|
|
bezierCurveToPolyline
|
|
|
} = beziercurve
|
|
|
|
|
|
export 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('Circle shape configuration is abnormal!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
|
|
|
draw({
|
|
|
ctx
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
ctx.beginPath()
|
|
|
|
|
|
const {
|
|
|
rx,
|
|
|
ry,
|
|
|
r
|
|
|
} = shape
|
|
|
|
|
|
ctx.arc(rx, ry, r > 0 ? r : 0.01, 0, Math.PI * 2)
|
|
|
|
|
|
ctx.fill()
|
|
|
ctx.stroke()
|
|
|
|
|
|
ctx.closePath()
|
|
|
|
|
|
// ctx.draw()
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
rx,
|
|
|
ry,
|
|
|
r
|
|
|
} = shape
|
|
|
|
|
|
return checkPointIsInCircle(position, rx, ry, r)
|
|
|
},
|
|
|
|
|
|
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
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export const ellipse = {
|
|
|
shape: {
|
|
|
rx: 0,
|
|
|
ry: 0,
|
|
|
hr: 0,
|
|
|
vr: 0
|
|
|
},
|
|
|
|
|
|
validator({
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
rx,
|
|
|
ry,
|
|
|
hr,
|
|
|
vr
|
|
|
} = shape
|
|
|
|
|
|
if (typeof rx !== 'number' || typeof ry !== 'number' || typeof hr !== 'number' || typeof vr !== 'number') {
|
|
|
console.error('Ellipse shape configuration is abnormal!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
|
|
|
draw({
|
|
|
ctx
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
ctx.beginPath()
|
|
|
|
|
|
let {
|
|
|
rx,
|
|
|
ry,
|
|
|
hr,
|
|
|
vr
|
|
|
} = shape
|
|
|
|
|
|
ctx.ellipse(rx, ry, hr > 0 ? hr : 0.01, vr > 0 ? vr : 0.01, 0, 0, Math.PI * 2)
|
|
|
|
|
|
ctx.fill()
|
|
|
ctx.stroke()
|
|
|
|
|
|
ctx.closePath()
|
|
|
// ctx.draw()
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
rx,
|
|
|
ry,
|
|
|
hr,
|
|
|
vr
|
|
|
} = shape
|
|
|
|
|
|
const a = Math.max(hr, vr)
|
|
|
const b = Math.min(hr, vr)
|
|
|
|
|
|
const c = Math.sqrt(a * a - b * b)
|
|
|
|
|
|
const leftFocusPoint = [rx - c, ry]
|
|
|
const rightFocusPoint = [rx + c, ry]
|
|
|
|
|
|
const distance = getTwoPointDistance(position, leftFocusPoint) + getTwoPointDistance(position,
|
|
|
rightFocusPoint)
|
|
|
|
|
|
return distance <= 2 * a
|
|
|
},
|
|
|
|
|
|
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
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export const rect = {
|
|
|
shape: {
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
w: 0,
|
|
|
h: 0
|
|
|
},
|
|
|
|
|
|
validator({
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
x,
|
|
|
y,
|
|
|
w,
|
|
|
h
|
|
|
} = shape
|
|
|
|
|
|
if (typeof x !== 'number' || typeof y !== 'number' || typeof w !== 'number' || typeof h !== 'number') {
|
|
|
console.error('Rect shape configuration is abnormal!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
|
|
|
draw({
|
|
|
ctx
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
ctx.beginPath()
|
|
|
|
|
|
let {
|
|
|
x,
|
|
|
y,
|
|
|
w,
|
|
|
h
|
|
|
} = shape
|
|
|
|
|
|
ctx.rect(x, y, w, h)
|
|
|
|
|
|
ctx.fill()
|
|
|
ctx.stroke()
|
|
|
|
|
|
ctx.closePath()
|
|
|
// ctx.draw()
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
shape
|
|
|
}) {
|
|
|
let {
|
|
|
x,
|
|
|
y,
|
|
|
w,
|
|
|
h
|
|
|
} = shape
|
|
|
|
|
|
return checkPointIsInRect(position, x, y, w, h)
|
|
|
},
|
|
|
|
|
|
setGraphCenter(e, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
x,
|
|
|
y,
|
|
|
w,
|
|
|
h
|
|
|
} = shape
|
|
|
|
|
|
style.graphCenter = [x + w / 2, y + h / 2]
|
|
|
},
|
|
|
|
|
|
move({
|
|
|
movementX,
|
|
|
movementY
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
this.attr('shape', {
|
|
|
x: shape.x + movementX,
|
|
|
y: shape.y + movementY
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export const rectRound = {
|
|
|
shape: {
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
w: 0,
|
|
|
h: 0,
|
|
|
radius:[0,0,0,0],
|
|
|
close:false,//true时为填充，否则描边。
|
|
|
},
|
|
|
|
|
|
validator({
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
x,
|
|
|
y,
|
|
|
w,
|
|
|
h
|
|
|
} = shape
|
|
|
|
|
|
if (typeof x !== 'number' || typeof y !== 'number' || typeof w !== 'number' || typeof h !== 'number') {
|
|
|
console.error('Rect shape configuration is abnormal!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
|
|
|
draw({
|
|
|
ctx
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
ctx.beginPath()
|
|
|
|
|
|
let {
|
|
|
x,
|
|
|
y,
|
|
|
w,
|
|
|
h,
|
|
|
radius,
|
|
|
close
|
|
|
} = shape
|
|
|
|
|
|
if(typeof radius ==='number'){
|
|
|
radius = [radius,radius,radius,radius]
|
|
|
}
|
|
|
const cxt = ctx;
|
|
|
let width = w,height = h;
|
|
|
var r0 = radius[0],r1 = radius[1],r2 = radius[2],r3 = radius[3];
|
|
|
cxt.beginPath();
|
|
|
//从右下角顺时针绘制，弧度从0到1/2PI
|
|
|
cxt.arc(width - r0+x, height - r0+y, r0, 0, Math.PI / 2);
|
|
|
|
|
|
//矩形下边线
|
|
|
cxt.lineTo(r1+x, height+y);
|
|
|
|
|
|
//左下角圆弧，弧度从1/2PI到PI
|
|
|
cxt.arc(r1+x, height - r1+y, r1, Math.PI / 2, Math.PI);
|
|
|
|
|
|
//矩形左边线
|
|
|
cxt.lineTo(x, r2+y);
|
|
|
|
|
|
//左上角圆弧，弧度从PI到3/2PI
|
|
|
cxt.arc(r2+x, r2+y, r2, Math.PI, Math.PI * 3 / 2);
|
|
|
|
|
|
//上边线
|
|
|
cxt.lineTo(width - r3+x, y);
|
|
|
|
|
|
//右上角圆弧
|
|
|
cxt.arc(width - r3+x, r3+y, r3, Math.PI * 3 / 2, Math.PI * 2);
|
|
|
|
|
|
//右边线
|
|
|
cxt.lineTo(width+x, height+y-r0);
|
|
|
ctx.stroke()
|
|
|
if(close){
|
|
|
ctx.fill()
|
|
|
}
|
|
|
|
|
|
cxt.closePath();
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
shape,style,
|
|
|
}) {
|
|
|
let {
|
|
|
x,
|
|
|
y,
|
|
|
w,
|
|
|
h
|
|
|
} = shape
|
|
|
let {lineWidth} = style;
|
|
|
return checkPointIsInRect(position, x-lineWidth, y-lineWidth, w+lineWidth, h+lineWidth)
|
|
|
},
|
|
|
|
|
|
setGraphCenter(e, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
x,
|
|
|
y,
|
|
|
w,
|
|
|
h
|
|
|
} = shape
|
|
|
|
|
|
style.graphCenter = [x + w / 2, y + h / 2]
|
|
|
},
|
|
|
|
|
|
move({
|
|
|
movementX,
|
|
|
movementY
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
this.attr('shape', {
|
|
|
x: shape.x + movementX,
|
|
|
y: shape.y + movementY
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
export const ring = {
|
|
|
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('Ring shape configuration is abnormal!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
|
|
|
draw({
|
|
|
ctx
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
ctx.beginPath()
|
|
|
|
|
|
const {
|
|
|
rx,
|
|
|
ry,
|
|
|
r
|
|
|
} = shape
|
|
|
|
|
|
ctx.arc(rx, ry, r > 0 ? r : 0.01, 0, Math.PI * 2)
|
|
|
|
|
|
ctx.stroke()
|
|
|
|
|
|
ctx.closePath()
|
|
|
// ctx.draw()
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
rx,
|
|
|
ry,
|
|
|
r
|
|
|
} = shape
|
|
|
|
|
|
const {
|
|
|
lineWidth
|
|
|
} = style
|
|
|
|
|
|
const halfLineWidth = lineWidth / 2
|
|
|
|
|
|
const minDistance = r - halfLineWidth
|
|
|
const maxDistance = r + halfLineWidth
|
|
|
|
|
|
const distance = getTwoPointDistance(position, [rx, ry])
|
|
|
|
|
|
return (distance >= minDistance && distance <= maxDistance)
|
|
|
},
|
|
|
|
|
|
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
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export const arc = {
|
|
|
shape: {
|
|
|
rx: 0,
|
|
|
ry: 0,
|
|
|
r: 0,
|
|
|
startAngle: 0,
|
|
|
endAngle: 0,
|
|
|
clockWise: true
|
|
|
},
|
|
|
|
|
|
validator({
|
|
|
shape
|
|
|
}) {
|
|
|
const keys = ['rx', 'ry', 'r', 'startAngle', 'endAngle']
|
|
|
|
|
|
if (keys.find(key => typeof shape[key] !== 'number')) {
|
|
|
console.error('Arc shape configuration is abnormal!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
|
|
|
draw({
|
|
|
ctx
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
ctx.beginPath()
|
|
|
|
|
|
const {
|
|
|
rx,
|
|
|
ry,
|
|
|
r,
|
|
|
startAngle,
|
|
|
endAngle,
|
|
|
clockWise
|
|
|
} = shape
|
|
|
|
|
|
ctx.arc(rx, ry, r > 0 ? r : 0.001, startAngle, endAngle, !clockWise)
|
|
|
|
|
|
ctx.stroke()
|
|
|
|
|
|
ctx.closePath()
|
|
|
// ctx.draw(true)
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
rx,
|
|
|
ry,
|
|
|
r,
|
|
|
startAngle,
|
|
|
endAngle,
|
|
|
clockWise
|
|
|
} = shape
|
|
|
|
|
|
const {
|
|
|
lineWidth
|
|
|
} = style
|
|
|
|
|
|
const halfLineWidth = lineWidth / 2
|
|
|
|
|
|
const insideRadius = r - halfLineWidth
|
|
|
const outsideRadius = r + halfLineWidth
|
|
|
|
|
|
return !checkPointIsInSector(position, rx, ry, insideRadius, startAngle, endAngle, clockWise) &&
|
|
|
checkPointIsInSector(position, rx, ry, outsideRadius, startAngle, endAngle, clockWise)
|
|
|
},
|
|
|
|
|
|
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
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export const sector = {
|
|
|
shape: {
|
|
|
rx: 0,
|
|
|
ry: 0,
|
|
|
r: 0,
|
|
|
startAngle: 0,
|
|
|
endAngle: 0,
|
|
|
clockWise: true
|
|
|
},
|
|
|
|
|
|
validator({
|
|
|
shape
|
|
|
}) {
|
|
|
const keys = ['rx', 'ry', 'r', 'startAngle', 'endAngle']
|
|
|
|
|
|
if (keys.find(key => typeof shape[key] !== 'number')) {
|
|
|
console.error('Sector shape configuration is abnormal!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
|
|
|
draw({
|
|
|
ctx
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
ctx.beginPath()
|
|
|
|
|
|
const {
|
|
|
rx,
|
|
|
ry,
|
|
|
r,
|
|
|
startAngle,
|
|
|
endAngle,
|
|
|
clockWise
|
|
|
} = shape
|
|
|
|
|
|
ctx.arc(rx, ry, r > 0 ? r : 0.01, startAngle, endAngle, !clockWise)
|
|
|
|
|
|
ctx.lineTo(rx, ry)
|
|
|
|
|
|
ctx.closePath()
|
|
|
|
|
|
ctx.stroke()
|
|
|
ctx.fill()
|
|
|
// ctx.draw()
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
rx,
|
|
|
ry,
|
|
|
r,
|
|
|
startAngle,
|
|
|
endAngle,
|
|
|
clockWise
|
|
|
} = shape
|
|
|
|
|
|
return checkPointIsInSector(position, rx, ry, r, startAngle, endAngle, clockWise)
|
|
|
},
|
|
|
|
|
|
setGraphCenter(e, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
rx,
|
|
|
ry
|
|
|
} = shape
|
|
|
|
|
|
style.graphCenter = [rx, ry]
|
|
|
},
|
|
|
|
|
|
move({
|
|
|
movementX,
|
|
|
movementY
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
rx,
|
|
|
ry
|
|
|
} = shape
|
|
|
|
|
|
this.attr('shape', {
|
|
|
rx: rx + movementX,
|
|
|
ry: ry + movementY
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export const regPolygon = {
|
|
|
shape: {
|
|
|
rx: 0,
|
|
|
ry: 0,
|
|
|
r: 0,
|
|
|
side: 0
|
|
|
},
|
|
|
|
|
|
validator({
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
side
|
|
|
} = shape
|
|
|
|
|
|
const keys = ['rx', 'ry', 'r', 'side']
|
|
|
|
|
|
if (keys.find(key => typeof shape[key] !== 'number')) {
|
|
|
console.error('RegPolygon shape configuration is abnormal!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
if (side < 3) {
|
|
|
console.error('RegPolygon at least trigon!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
|
|
|
draw({
|
|
|
ctx
|
|
|
}, {
|
|
|
shape,
|
|
|
cache
|
|
|
}) {
|
|
|
ctx.beginPath()
|
|
|
|
|
|
const {
|
|
|
rx,
|
|
|
ry,
|
|
|
r,
|
|
|
side
|
|
|
} = shape
|
|
|
|
|
|
if (!cache.points || cache.rx !== rx || cache.ry !== ry || cache.r !== r || cache.side !== side) {
|
|
|
const points = getRegularPolygonPoints(rx, ry, r, side)
|
|
|
|
|
|
Object.assign(cache, {
|
|
|
points,
|
|
|
rx,
|
|
|
ry,
|
|
|
r,
|
|
|
side
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const {
|
|
|
points
|
|
|
} = cache
|
|
|
|
|
|
drawPolylinePath(ctx, points)
|
|
|
|
|
|
ctx.closePath()
|
|
|
|
|
|
ctx.stroke()
|
|
|
ctx.fill()
|
|
|
// ctx.draw()
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
cache
|
|
|
}) {
|
|
|
let {
|
|
|
points
|
|
|
} = cache
|
|
|
|
|
|
return checkPointIsInPolygon(position, points)
|
|
|
},
|
|
|
|
|
|
setGraphCenter(e, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
rx,
|
|
|
ry
|
|
|
} = shape
|
|
|
|
|
|
style.graphCenter = [rx, ry]
|
|
|
},
|
|
|
|
|
|
move({
|
|
|
movementX,
|
|
|
movementY
|
|
|
}, {
|
|
|
shape,
|
|
|
cache
|
|
|
}) {
|
|
|
const {
|
|
|
rx,
|
|
|
ry
|
|
|
} = shape
|
|
|
|
|
|
cache.rx += movementX
|
|
|
cache.ry += movementY
|
|
|
|
|
|
this.attr('shape', {
|
|
|
rx: rx + movementX,
|
|
|
ry: ry + movementY
|
|
|
})
|
|
|
|
|
|
cache.points = cache.points.map(([x, y]) => [x + movementX, y + movementY])
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export const polyline = {
|
|
|
shape: {
|
|
|
points: [],
|
|
|
close: false
|
|
|
},
|
|
|
|
|
|
validator({
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
if (!(points instanceof Array)) {
|
|
|
console.error('Polyline points should be an array!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
|
|
|
draw({
|
|
|
ctx
|
|
|
}, {
|
|
|
shape,
|
|
|
style: {
|
|
|
lineWidth
|
|
|
}
|
|
|
}) {
|
|
|
ctx.beginPath()
|
|
|
|
|
|
let {
|
|
|
points,
|
|
|
close
|
|
|
} = shape
|
|
|
|
|
|
if (lineWidth === 1) points = eliminateBlur(points)
|
|
|
|
|
|
drawPolylinePath(ctx, points)
|
|
|
|
|
|
if (close) {
|
|
|
ctx.closePath()
|
|
|
|
|
|
ctx.fill()
|
|
|
ctx.stroke()
|
|
|
} else {
|
|
|
ctx.stroke()
|
|
|
|
|
|
}
|
|
|
// ctx.draw()
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
points,
|
|
|
close
|
|
|
} = shape
|
|
|
|
|
|
const {
|
|
|
lineWidth
|
|
|
} = style
|
|
|
|
|
|
if (close) {
|
|
|
return checkPointIsInPolygon(position, points)
|
|
|
} else {
|
|
|
return checkPointIsNearPolyline(position, points, lineWidth)
|
|
|
}
|
|
|
},
|
|
|
|
|
|
setGraphCenter(e, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
style.graphCenter = points[0]
|
|
|
},
|
|
|
|
|
|
move({
|
|
|
movementX,
|
|
|
movementY
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
const moveAfterPoints = points.map(([x, y]) => [x + movementX, y + movementY])
|
|
|
|
|
|
this.attr('shape', {
|
|
|
points: moveAfterPoints
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export const smoothline = {
|
|
|
shape: {
|
|
|
points: [],
|
|
|
close: false
|
|
|
},
|
|
|
|
|
|
validator({
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
if (!(points instanceof Array)) {
|
|
|
console.error('Smoothline points should be an array!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
|
|
|
draw({
|
|
|
ctx
|
|
|
}, {
|
|
|
shape,
|
|
|
cache
|
|
|
}) {
|
|
|
const {
|
|
|
points,
|
|
|
close
|
|
|
} = shape
|
|
|
|
|
|
if (!cache.points || cache.points.toString() !== points.toString()) {
|
|
|
const bezierCurve = polylineToBezierCurve(points, close)
|
|
|
const hoverPoints = bezierCurveToPolyline(bezierCurve)
|
|
|
|
|
|
Object.assign(cache, {
|
|
|
points: deepClone(points, true),
|
|
|
bezierCurve,
|
|
|
hoverPoints
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const {
|
|
|
bezierCurve
|
|
|
} = cache
|
|
|
|
|
|
ctx.beginPath()
|
|
|
|
|
|
drawBezierCurvePath(ctx, bezierCurve.slice(1), bezierCurve[0])
|
|
|
|
|
|
if (close) {
|
|
|
ctx.closePath()
|
|
|
|
|
|
ctx.fill()
|
|
|
ctx.stroke()
|
|
|
} else {
|
|
|
ctx.stroke()
|
|
|
}
|
|
|
// ctx.draw()
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
cache,
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
hoverPoints
|
|
|
} = cache
|
|
|
|
|
|
const {
|
|
|
close
|
|
|
} = shape
|
|
|
|
|
|
const {
|
|
|
lineWidth
|
|
|
} = style
|
|
|
|
|
|
if (close) {
|
|
|
return checkPointIsInPolygon(position, hoverPoints)
|
|
|
} else {
|
|
|
return checkPointIsNearPolyline(position, hoverPoints, lineWidth)
|
|
|
}
|
|
|
},
|
|
|
|
|
|
setGraphCenter(e, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
style.graphCenter = points[0]
|
|
|
},
|
|
|
|
|
|
move({
|
|
|
movementX,
|
|
|
movementY
|
|
|
}, {
|
|
|
shape,
|
|
|
cache
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
const moveAfterPoints = points.map(([x, y]) => [x + movementX, y + movementY])
|
|
|
|
|
|
cache.points = moveAfterPoints
|
|
|
|
|
|
const [fx, fy] = cache.bezierCurve[0]
|
|
|
const curves = cache.bezierCurve.slice(1)
|
|
|
|
|
|
cache.bezierCurve = [
|
|
|
[fx + movementX, fy + movementY],
|
|
|
...curves.map(curve => curve.map(([x, y]) => [x + movementX, y + movementY]))
|
|
|
]
|
|
|
|
|
|
cache.hoverPoints = cache.hoverPoints.map(([x, y]) => [x + movementX, y + movementY])
|
|
|
|
|
|
this.attr('shape', {
|
|
|
points: moveAfterPoints
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export const bezierCurve = {
|
|
|
shape: {
|
|
|
points: [],
|
|
|
close: false
|
|
|
},
|
|
|
|
|
|
validator({
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
if (!(points instanceof Array)) {
|
|
|
console.error('BezierCurve points should be an array!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
|
|
|
draw({
|
|
|
ctx
|
|
|
}, {
|
|
|
shape,
|
|
|
cache
|
|
|
}) {
|
|
|
let {
|
|
|
points,
|
|
|
close
|
|
|
} = shape
|
|
|
|
|
|
if (!cache.points || cache.points.toString() !== points.toString()) {
|
|
|
const hoverPoints = bezierCurveToPolyline(points, 20)
|
|
|
|
|
|
Object.assign(cache, {
|
|
|
points: deepClone(points, true),
|
|
|
hoverPoints
|
|
|
})
|
|
|
}
|
|
|
|
|
|
ctx.beginPath()
|
|
|
|
|
|
drawBezierCurvePath(ctx, points.slice(1), points[0])
|
|
|
|
|
|
if (close) {
|
|
|
ctx.closePath()
|
|
|
|
|
|
ctx.fill()
|
|
|
ctx.stroke()
|
|
|
} else {
|
|
|
ctx.stroke()
|
|
|
}
|
|
|
// ctx.draw()
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
cache,
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
hoverPoints
|
|
|
} = cache
|
|
|
|
|
|
const {
|
|
|
close
|
|
|
} = shape
|
|
|
|
|
|
const {
|
|
|
lineWidth
|
|
|
} = style
|
|
|
|
|
|
if (close) {
|
|
|
return checkPointIsInPolygon(position, hoverPoints)
|
|
|
} else {
|
|
|
return checkPointIsNearPolyline(position, hoverPoints, lineWidth)
|
|
|
}
|
|
|
},
|
|
|
|
|
|
setGraphCenter(e, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
style.graphCenter = points[0]
|
|
|
},
|
|
|
|
|
|
move({
|
|
|
movementX,
|
|
|
movementY
|
|
|
}, {
|
|
|
shape,
|
|
|
cache
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
const [fx, fy] = points[0]
|
|
|
const curves = points.slice(1)
|
|
|
|
|
|
const bezierCurve = [
|
|
|
[fx + movementX, fy + movementY],
|
|
|
...curves.map(curve => curve.map(([x, y]) => [x + movementX, y + movementY]))
|
|
|
]
|
|
|
|
|
|
cache.points = bezierCurve
|
|
|
cache.hoverPoints = cache.hoverPoints.map(([x, y]) => [x + movementX, y + movementY])
|
|
|
|
|
|
this.attr('shape', {
|
|
|
points: bezierCurve
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export const text = {
|
|
|
shape: {
|
|
|
content: '',
|
|
|
position: [],
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
rowGap: 0
|
|
|
},
|
|
|
|
|
|
validator({
|
|
|
shape,
|
|
|
style
|
|
|
}, ctx) {
|
|
|
const {
|
|
|
content,
|
|
|
position,
|
|
|
rowGap
|
|
|
} = shape
|
|
|
|
|
|
if (typeof content !== 'string') {
|
|
|
console.error('Text content should be a string!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
if (!(position instanceof Array)) {
|
|
|
console.error('Text position should be an array!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
if (typeof rowGap !== 'number') {
|
|
|
console.error('Text rowGap should be a number!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
this.textWidth = 0
|
|
|
this.textHeight = 0
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
measureSize(ctx, text) {
|
|
|
var _context = ctx,
|
|
|
fontSize = this.fontSize(),
|
|
|
metrics;
|
|
|
_context.save();
|
|
|
_context.font = ctx.font;
|
|
|
metrics = _context.measureText(text + "");
|
|
|
_context.restore();
|
|
|
return {
|
|
|
width: metrics.width,
|
|
|
height: fontSize,
|
|
|
};
|
|
|
},
|
|
|
draw({
|
|
|
ctx,
|
|
|
area
|
|
|
}, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
|
|
|
let {
|
|
|
content,
|
|
|
position,
|
|
|
maxWidth,
|
|
|
rowGap,
|
|
|
|
|
|
} = shape
|
|
|
let {
|
|
|
lineWidth
|
|
|
} = style;
|
|
|
const {
|
|
|
textBaseline,
|
|
|
font,
|
|
|
|
|
|
} = ctx
|
|
|
const [w, h] = area
|
|
|
const fontSize = parseInt(font.replace(/\D/g, ''))
|
|
|
|
|
|
let [x, y] = position
|
|
|
|
|
|
content = content.split('\n')
|
|
|
const rowNum = content.length
|
|
|
|
|
|
const lineHeight = fontSize + rowGap
|
|
|
const allHeight = rowNum * lineHeight - rowGap
|
|
|
|
|
|
let offset = 0
|
|
|
|
|
|
if (textBaseline === 'middle') {
|
|
|
offset = allHeight / 2
|
|
|
y += fontSize / 2
|
|
|
}
|
|
|
|
|
|
if (textBaseline === 'bottom') {
|
|
|
offset = allHeight
|
|
|
y += fontSize
|
|
|
}
|
|
|
|
|
|
position = new Array(rowNum).fill(0).map((foo, i) => [x, y + i * lineHeight - offset])
|
|
|
|
|
|
if (typeof maxWidth == 'undefined' || !maxWidth) maxWidth = w
|
|
|
// #ifdef H5
|
|
|
maxWidth = maxWidth * ctx.dpr
|
|
|
|
|
|
// #endif
|
|
|
let maxwi = []
|
|
|
ctx.beginPath()
|
|
|
content.forEach((text, i) => {
|
|
|
ctx.fillText(text, ...position[i], maxWidth)
|
|
|
if (lineWidth > 0) {
|
|
|
ctx.strokeText(text, ...position[i], maxWidth)
|
|
|
}
|
|
|
|
|
|
maxwi.push(ctx.measureText(text + "").width)
|
|
|
|
|
|
})
|
|
|
|
|
|
ctx.closePath()
|
|
|
this.textWidth = Math.max(...maxwi)
|
|
|
|
|
|
this.textHeight = allHeight
|
|
|
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
cache,
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const [x, y] = shape.position;
|
|
|
const {
|
|
|
textBaseline
|
|
|
} = style;
|
|
|
var w = this?.textWidth ?? 0;
|
|
|
var h = this?.textHeight ?? 0;
|
|
|
|
|
|
let isCheck = false;
|
|
|
|
|
|
if (textBaseline == 'top') {
|
|
|
if (position[0] >= x && position[0] <= x + w && position[1] >= y && position[1] <= y + h) {
|
|
|
isCheck = true;
|
|
|
}
|
|
|
} else if (textBaseline == 'bottom') {
|
|
|
if (position[0] >= x && position[0] <= x + w && position[1] >= y + h && position[1] <= y + h * 2) {
|
|
|
isCheck = true;
|
|
|
}
|
|
|
} else if (textBaseline == 'middle') {
|
|
|
if (position[0] >= x && position[0] <= x + w && position[1] >= y - h / 2 && position[1] <= y + h - h /
|
|
|
2) {
|
|
|
isCheck = true;
|
|
|
}
|
|
|
}
|
|
|
return isCheck;
|
|
|
|
|
|
},
|
|
|
|
|
|
setGraphCenter(e, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
position
|
|
|
} = shape
|
|
|
|
|
|
style.graphCenter = [...position]
|
|
|
},
|
|
|
|
|
|
move({
|
|
|
movementX,
|
|
|
movementY
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
position: [x, y]
|
|
|
} = shape
|
|
|
|
|
|
this.attr('shape', {
|
|
|
position: [x + movementX, y + movementY]
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export const path = {
|
|
|
shape: {
|
|
|
points: [],
|
|
|
close: false
|
|
|
},
|
|
|
|
|
|
validator({
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
if (!(points instanceof Array)) {
|
|
|
console.error('Polyline points should be an array!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
|
|
|
draw({
|
|
|
ctx
|
|
|
}, {
|
|
|
shape,
|
|
|
style: {
|
|
|
lineWidth
|
|
|
}
|
|
|
}) {
|
|
|
ctx.beginPath()
|
|
|
|
|
|
let {
|
|
|
points,
|
|
|
close
|
|
|
} = shape
|
|
|
|
|
|
if (lineWidth === 1) points = eliminateBlur(points)
|
|
|
|
|
|
drawPolylinePath(ctx, points)
|
|
|
|
|
|
if (close) {
|
|
|
ctx.closePath()
|
|
|
|
|
|
ctx.fill()
|
|
|
ctx.stroke()
|
|
|
} else {
|
|
|
ctx.stroke()
|
|
|
|
|
|
}
|
|
|
ctx.draw()
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
points,
|
|
|
close
|
|
|
} = shape
|
|
|
|
|
|
const {
|
|
|
lineWidth
|
|
|
} = style
|
|
|
|
|
|
if (close) {
|
|
|
|
|
|
return checkPointIsInPolygon(position, points)
|
|
|
} else {
|
|
|
return checkPointIsNearPolyline(position, points, lineWidth)
|
|
|
}
|
|
|
},
|
|
|
|
|
|
setGraphCenter(e, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
style.graphCenter = points[0]
|
|
|
},
|
|
|
|
|
|
move({
|
|
|
movementX,
|
|
|
movementY
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
const moveAfterPoints = points.map(([x, y]) => [x + movementX, y + movementY])
|
|
|
|
|
|
this.attr('shape', {
|
|
|
points: moveAfterPoints
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export const image = {
|
|
|
shape: {
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
w: 0,
|
|
|
h: 0,
|
|
|
sx: 0,
|
|
|
sy: 0,
|
|
|
src: ''
|
|
|
},
|
|
|
|
|
|
validator({
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
x,
|
|
|
y,
|
|
|
w,
|
|
|
h,
|
|
|
src
|
|
|
} = shape
|
|
|
|
|
|
if (typeof x !== 'number' || typeof y !== 'number' || typeof w !== 'number' || typeof h !== 'number' || !
|
|
|
src) {
|
|
|
console.error('image x,y,w,h,src必填。')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
|
|
|
draw({
|
|
|
ctx,
|
|
|
cav
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
|
|
|
let {
|
|
|
x,
|
|
|
y,
|
|
|
w,
|
|
|
h,
|
|
|
sx,
|
|
|
sy,
|
|
|
src
|
|
|
} = shape
|
|
|
|
|
|
let t = this;
|
|
|
// #ifdef MP-WEIXIN
|
|
|
//1加载中，2加载完成，3从未加载。
|
|
|
if (typeof this['isLoad'] == 'undefined' || this['isLoad'] == 3) {
|
|
|
|
|
|
this['isLoad'] = 1;
|
|
|
const bg = cav.createImage()
|
|
|
|
|
|
|
|
|
bg.onload = () => {
|
|
|
|
|
|
setTimeout(function() {
|
|
|
console.warn('tm-render:图片加载完成')
|
|
|
ctx.drawImage(bg, x, y, w, h)
|
|
|
t['isLoad'] = 2;
|
|
|
shape.src = bg
|
|
|
if(t?.load){
|
|
|
t.load();
|
|
|
}
|
|
|
}, 400)
|
|
|
}
|
|
|
bg.onerror = () => t['isLoad'] = 3
|
|
|
bg.src = src;
|
|
|
}
|
|
|
if (this['isLoad'] == 2) {
|
|
|
|
|
|
ctx.drawImage(src, x, y, w, h)
|
|
|
|
|
|
} else {
|
|
|
console.log('image loadding...');
|
|
|
}
|
|
|
|
|
|
// #endif
|
|
|
|
|
|
// #ifndef MP-WEIXIN
|
|
|
|
|
|
if(typeof this['isLoad'] =='undefined') this['isLoad'] = 3;
|
|
|
if(this['isLoad']===3){
|
|
|
this['isLoad'] = 1;
|
|
|
|
|
|
setTimeout(()=>{
|
|
|
t['isLoad'] = 2;
|
|
|
if(this?.load){
|
|
|
this.load();
|
|
|
}
|
|
|
},1200)
|
|
|
}
|
|
|
|
|
|
ctx.drawImage(src, x, y, w, h, sx, sy)
|
|
|
|
|
|
// #endif
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
shape
|
|
|
}) {
|
|
|
let {
|
|
|
x,
|
|
|
y,
|
|
|
w,
|
|
|
h
|
|
|
} = shape
|
|
|
|
|
|
return checkPointIsInRect(position, x, y, w, h)
|
|
|
},
|
|
|
|
|
|
setGraphCenter(e, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
x,
|
|
|
y,
|
|
|
w,
|
|
|
h
|
|
|
} = shape
|
|
|
|
|
|
style.graphCenter = [x + w / 2, y + h / 2]
|
|
|
},
|
|
|
|
|
|
move({
|
|
|
movementX,
|
|
|
movementY
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
this.attr('shape', {
|
|
|
x: shape.x + movementX,
|
|
|
y: shape.y + movementY
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export const star = {
|
|
|
shape: {
|
|
|
points: [],
|
|
|
close: false,
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
numPoints: 5, //星星的角数量
|
|
|
innerRadius: 40, //内部凹进去的比例
|
|
|
outerRadius: 70, //角向外凸出的比例。
|
|
|
},
|
|
|
|
|
|
validator({
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
points,
|
|
|
x,
|
|
|
y
|
|
|
} = shape
|
|
|
|
|
|
if (typeof x !== 'number' || typeof y !== 'number') {
|
|
|
console.error('Polyline points should be an array!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
|
|
|
draw({
|
|
|
ctx
|
|
|
}, {
|
|
|
shape,
|
|
|
style: {
|
|
|
lineWidth
|
|
|
}
|
|
|
}) {
|
|
|
let context = ctx;
|
|
|
let {
|
|
|
points,
|
|
|
close,
|
|
|
x,
|
|
|
y,
|
|
|
numPoints,
|
|
|
innerRadius,
|
|
|
outerRadius
|
|
|
} = shape;
|
|
|
|
|
|
context.beginPath();
|
|
|
context.moveTo(x, y - outerRadius);
|
|
|
|
|
|
|
|
|
points.push([x, y - outerRadius])
|
|
|
|
|
|
for (var n = 1; n <= numPoints * 2; n++) {
|
|
|
var radius = n % 2 === 0 ? outerRadius : innerRadius;
|
|
|
var x2 = radius * Math.sin((n * Math.PI) / numPoints);
|
|
|
var y2 = -1 * radius * Math.cos((n * Math.PI) / numPoints);
|
|
|
context.lineTo(x2 + x, y2 + y);
|
|
|
|
|
|
points.push([x2 + x, y2 + y])
|
|
|
}
|
|
|
|
|
|
this.shape.points = points;
|
|
|
if (lineWidth === 1) points = eliminateBlur(points)
|
|
|
|
|
|
if (close) {
|
|
|
ctx.closePath()
|
|
|
|
|
|
ctx.fill()
|
|
|
ctx.stroke()
|
|
|
} else {
|
|
|
ctx.stroke()
|
|
|
|
|
|
}
|
|
|
// ctx.draw()
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
points,
|
|
|
close
|
|
|
} = shape
|
|
|
|
|
|
const {
|
|
|
lineWidth
|
|
|
} = style
|
|
|
|
|
|
if (close) {
|
|
|
return checkPointIsInPolygon(position, points)
|
|
|
} else {
|
|
|
return checkPointIsNearPolyline(position, points, lineWidth)
|
|
|
}
|
|
|
},
|
|
|
|
|
|
setGraphCenter(e, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
style.graphCenter = points[0]
|
|
|
},
|
|
|
|
|
|
move({
|
|
|
movementX,
|
|
|
movementY
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
const moveAfterPoints = points.map(([x, y]) => [x + movementX, y + movementY])
|
|
|
|
|
|
this.attr('shape', {
|
|
|
points: moveAfterPoints
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export const arrow = {
|
|
|
shape: {
|
|
|
points: [],
|
|
|
close: true,
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
tension: 0, //弯曲程度。
|
|
|
pointerLength: 0, //箭头指针长度。
|
|
|
pointerWidth: 0, //箭头指针宽度。
|
|
|
pointerAtBeginning: false, //我们需要在两边画指针吗？默认值为 false。
|
|
|
pointerAtEnding: true, //结束端显示箭头。
|
|
|
hitPoints: [], //检测命中点。
|
|
|
},
|
|
|
|
|
|
validator({
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
points,
|
|
|
x,
|
|
|
y,
|
|
|
close,
|
|
|
tension,
|
|
|
pointerLength,
|
|
|
pointerWidth,
|
|
|
pointerAtBeginning,
|
|
|
pointerAtEnding
|
|
|
} = shape
|
|
|
|
|
|
if (typeof x !== 'number' || typeof y !== 'number') {
|
|
|
console.error('Polyline points should be an array!')
|
|
|
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
},
|
|
|
|
|
|
draw({
|
|
|
ctx
|
|
|
}, {
|
|
|
shape,
|
|
|
style: {
|
|
|
lineWidth
|
|
|
}
|
|
|
}) {
|
|
|
let context = ctx;
|
|
|
|
|
|
let {
|
|
|
points,
|
|
|
x,
|
|
|
y,
|
|
|
close,
|
|
|
tension,
|
|
|
pointerLength,
|
|
|
pointerWidth,
|
|
|
pointerAtBeginning,
|
|
|
pointerAtEnding
|
|
|
} = shape
|
|
|
let old_x = points[2] - points[0]
|
|
|
let old_y = points[3] - points[1]
|
|
|
points[0] = this.shape.x
|
|
|
points[1] = this.shape.y
|
|
|
points[2] = this.shape.x + old_x
|
|
|
points[3] = this.shape.y + old_y
|
|
|
var PI2 = Math.PI * 2;
|
|
|
|
|
|
var tp = points;
|
|
|
var fromTension = tension !== 0 && points.length > 4;
|
|
|
if (fromTension) {
|
|
|
|
|
|
if (close) {
|
|
|
tp = getTensionPointsClosed(points, tension);
|
|
|
} else {
|
|
|
tp = expandPoints(points, tension);
|
|
|
}
|
|
|
console.log(tp);
|
|
|
}
|
|
|
var length = pointerLength;
|
|
|
var n = points.length;
|
|
|
var dx, dy;
|
|
|
if (fromTension) {
|
|
|
const lp = [
|
|
|
tp[tp.length - 4],
|
|
|
tp[tp.length - 3],
|
|
|
tp[tp.length - 2],
|
|
|
tp[tp.length - 1],
|
|
|
points[n - 2],
|
|
|
points[n - 1],
|
|
|
];
|
|
|
const lastLength = calcLength(tp[tp.length - 4], tp[tp.length - 3], 'C', lp);
|
|
|
const previous = getPointOnQuadraticBezier(Math.min(1, 1 - length / lastLength), lp[0], lp[1], lp[2],
|
|
|
lp[3], lp[4], lp[5]);
|
|
|
dx = points[n - 2] - previous.x;
|
|
|
dy = points[n - 1] - previous.y;
|
|
|
} else {
|
|
|
dx = points[n - 2] - points[n - 4];
|
|
|
dy = points[n - 1] - points[n - 3];
|
|
|
}
|
|
|
var radians = (Math.atan2(dy, dx) + PI2) % PI2;
|
|
|
var width = pointerWidth;
|
|
|
this.shape.hitPoints = []
|
|
|
ctx.save();
|
|
|
ctx.beginPath();
|
|
|
ctx.moveTo(points[0], points[1]);
|
|
|
// #ifdef H5 || APP-VUE
|
|
|
ctx.lineTo(points[2], points[3]);
|
|
|
// #endif
|
|
|
// #ifdef MP
|
|
|
ctx.lineTo(points[2], points[3]);
|
|
|
// #endif
|
|
|
ctx.closePath();
|
|
|
if (pointerAtEnding) {
|
|
|
ctx.translate(points[n - 2], points[n - 1]);
|
|
|
ctx.rotate(radians);
|
|
|
// #ifdef H5 || APP-VUE
|
|
|
|
|
|
ctx.moveTo(points[2], points[3]);
|
|
|
ctx.lineTo(points[2], points[3] - width / 2);
|
|
|
ctx.lineTo(length + points[2], points[3]);
|
|
|
ctx.lineTo(points[2], width / 2 + points[3]);
|
|
|
|
|
|
// #endif
|
|
|
// #ifdef MP
|
|
|
ctx.moveTo(0, 0);
|
|
|
ctx.lineTo(-length, width / 2);
|
|
|
ctx.lineTo(-length, -width / 2);
|
|
|
// #endif
|
|
|
ctx.closePath();
|
|
|
ctx.restore();
|
|
|
this.shape.hitPoints.push([points[2], points[3] - width / 2]);
|
|
|
this.shape.hitPoints.push([length + points[2], points[3]]);
|
|
|
this.shape.hitPoints.push([points[2], width / 2 + points[3]]);
|
|
|
|
|
|
}
|
|
|
if (pointerAtBeginning) {
|
|
|
if (pointerAtBeginning) {
|
|
|
ctx.save();
|
|
|
}
|
|
|
|
|
|
ctx.translate(x, y);
|
|
|
if (fromTension) {
|
|
|
dx = (tp[0] + tp[2]) / 2 - points[0];
|
|
|
dy = (tp[1] + tp[3]) / 2 - points[1];
|
|
|
} else {
|
|
|
dx = points[2] - points[0];
|
|
|
dy = points[3] - points[1];
|
|
|
}
|
|
|
ctx.rotate((Math.atan2(-dy, -dx) + PI2) % PI2);
|
|
|
// #ifdef H5 || APP-VUE
|
|
|
ctx.moveTo(points[0], points[1]);
|
|
|
ctx.lineTo(points[0], points[1] - width / 2);
|
|
|
ctx.lineTo(-length + points[0], points[1]);
|
|
|
ctx.lineTo(points[0], width / 2 + points[1]);
|
|
|
// #endif
|
|
|
|
|
|
// #ifdef MP
|
|
|
ctx.moveTo(0, 0);
|
|
|
ctx.lineTo(-length, width / 2);
|
|
|
ctx.lineTo(-length, -width / 2);
|
|
|
// #endif
|
|
|
|
|
|
ctx.closePath();
|
|
|
ctx.restore();
|
|
|
|
|
|
}
|
|
|
|
|
|
if (close) {
|
|
|
|
|
|
ctx.fill()
|
|
|
ctx.stroke()
|
|
|
} else {
|
|
|
ctx.stroke()
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
hoverCheck(position, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
points,
|
|
|
hitPoints,
|
|
|
close,
|
|
|
pointerLength,
|
|
|
pointerWidth
|
|
|
} = shape
|
|
|
|
|
|
const {
|
|
|
lineWidth
|
|
|
} = style
|
|
|
|
|
|
// if (close) {
|
|
|
// console.log( checkPointIsInPolygon(position, hitPoints));
|
|
|
// return checkPointIsInPolygon(position, hitPoints)
|
|
|
// } else {
|
|
|
// return checkPointIsNearPolyline(position, hitPoints, lineWidth)
|
|
|
// }
|
|
|
// #ifdef H5 || APP-VUE
|
|
|
return checkPointIsInRect(position, points[2], points[3] - pointerWidth / 2, pointerLength, pointerWidth)
|
|
|
// #endif
|
|
|
// #ifdef MP
|
|
|
return checkPointIsInRect(position, points[2] - pointerLength, points[3] - pointerWidth / 2, pointerLength,
|
|
|
pointerWidth)
|
|
|
// #endif
|
|
|
},
|
|
|
|
|
|
setGraphCenter(e, {
|
|
|
shape,
|
|
|
style
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
style.graphCenter = points[0]
|
|
|
},
|
|
|
|
|
|
move({
|
|
|
movementX,
|
|
|
movementY
|
|
|
}, {
|
|
|
shape
|
|
|
}) {
|
|
|
const {
|
|
|
points
|
|
|
} = shape
|
|
|
|
|
|
const moveAfterPoints = points.map(([x, y]) => [x + movementX, y + movementY])
|
|
|
|
|
|
this.attr('shape', {
|
|
|
points: moveAfterPoints
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
const graphs = new Map([
|
|
|
|
|
|
['rectRound', rectRound],
|
|
|
['arrow', arrow],
|
|
|
['star', star],
|
|
|
['image', image],
|
|
|
['path', path],
|
|
|
['circle', circle],
|
|
|
['ellipse', ellipse],
|
|
|
['rect', rect],
|
|
|
['ring', ring],
|
|
|
['arc', arc],
|
|
|
['sector', sector],
|
|
|
['regPolygon', regPolygon],
|
|
|
['polyline', polyline],
|
|
|
['smoothline', smoothline],
|
|
|
['bezierCurve', bezierCurve],
|
|
|
['text', text]
|
|
|
])
|
|
|
|
|
|
export default graphs
|
|
|
|
|
|
/**
|
|
|
* @description Extend new graph
|
|
|
* @param {String} name Name of Graph
|
|
|
* @param {Object} config Configuration of Graph
|
|
|
* @return {Undefined} Void
|
|
|
*/
|
|
|
export function extendNewGraph(name, config) {
|
|
|
if (!name || !config) {
|
|
|
console.error('ExtendNewGraph Missing Parameters!')
|
|
|
|
|
|
return
|
|
|
}
|
|
|
|
|
|
if (!config.shape) {
|
|
|
console.error('Required attribute of shape to extendNewGraph!')
|
|
|
|
|
|
return
|
|
|
}
|
|
|
|
|
|
if (!config.validator) {
|
|
|
console.error('Required function of validator to extendNewGraph!')
|
|
|
|
|
|
return
|
|
|
}
|
|
|
|
|
|
if (!config.draw) {
|
|
|
console.error('Required function of draw to extendNewGraph!')
|
|
|
|
|
|
return
|
|
|
}
|
|
|
|
|
|
graphs.set(name, config)
|
|
|
}
|