前端使用 Konva 实现可视化设计器（21）- 绘制图形（椭圆）
本章开始补充一些基础的图形绘制，比如绘制：直线、曲线、圆/椭形、矩形。这一章主要分享一下本示例是如何开始绘制一个图形的，并以绘制圆/椭形为实现目标。
请大家动动小手，给我一个免费的 Star 吧~
大家如果发现了 Bug，欢迎来提 Issue 哟~
接下来主要说说：
- UI
- Graph（图形）
- canvas2svg 打补丁
- 拐点旋转修复
UI - 图形绘制类型切换
先找几个图标，增加按钮，分别代表绘制图形：直线、曲线、圆/椭形、矩形：
选中图形类型后，即可通过拖动绘制图形（绘制完成后，清空选择）：
定义图形类型：
// src/Render/types.ts
/**
* 图形类型
*/
export enum GraphType {
Line = 'Line', // 直线
Curve = 'Curve', // 曲线
Rect = 'Rect', // 矩形
Circle = 'Circle' // 圆/椭圆形
}
在 Render 中记录当前图形类型，并提供修改方法与事件：
// src/Render/index.ts
// 略
// 画图类型
graphType: Types.GraphType | undefined = undefined
// 略
// 改变画图类型
changeGraphType(type?: Types.GraphType) {
this.graphType = type
this.emit('graph-type-change', this.graphType)
}
工具栏按钮通讯：
// src/components/main-header/index.vue
// 略
const emit = defineEmits([/* 略 */, 'update:graphType'])
const props = withDefaults(defineProps<{
// 略
graphType?: Types.GraphType
}>(), {
// 略
});
// 略
watch(() => props.render, () => {
if (props.render) {
// 略
props.render?.on('graph-type-change', (value) => {
emit('update:graphType', value)
})
}
}, {
immediate: true
})
// 略
function onGraph(type: Types.GraphType) {
emit('update:graphType', props.graphType === type ? undefined : type)
以上就是绘制图形的工具栏入口。
Graph - 图形定义及其相关实现
相关代码文件：
1、src/Render/graphs/BaseGraph.ts - 抽象类：定义通用属性、逻辑、外部接口定义。
2、src/Render/graphs/Circle.ts 继承 BaseGraph - 构造 圆/椭形 ；处理创建部分交互信息；关键逻辑的实现。
3、src/Render/handlers/GraphHandlers.ts - 收集图形创建所需交互信息，接着交给 Circle 静态处理方法处理。
4、src/Render/draws/GraphDraw.ts - 绘制图形、调整点 - 绘制 调整点 的锚点；收集并处理交互信息，接着并交给 Circle 静态处理方法处理。
BaseGraph 抽象类
// src/Render/graphs/BaseGraph.ts
// 略
/**
* 图形类
* 实例主要用于新建图形时，含新建同时的大小拖动。
* 静态方法主要用于新建之后，通过 调整点 调整的逻辑定义
*/
export abstract class BaseGraph {
/**
* 更新 图形 的 调整点 的 锚点位置
* @param width 图形 的 宽度
* @param height 图形 的 高度
* @param rotate 图形 的 旋转角度
* @param anchorShadows 图形 的 调整点 的 锚点
*/
static updateAnchorShadows(
width: number,
height: number,
rotate: number,
anchorShadows: Konva.Circle[]
) {
console.log('请实现 updateAnchorShadows', width, height, anchorShadows)
}
/**
* 更新 图形 的 连接点 的 锚点位置
* @param width 图形 的 宽度
* @param height 图形 的 高度
* @param rotate 图形 的 旋转角度
* @param anchors 图形 的 调整点 的 锚点
*/
static updateLinkAnchorShadows(
width: number,
height: number,
rotate: number,
linkAnchorShadows: Konva.Circle[]
) {
console.log('请实现 updateLinkAnchorShadows', width, height, linkAnchorShadows)
}
/**
* 生成 调整点
* @param render 渲染实例
* @param graph 图形
* @param anchor 调整点 定义
* @param anchorShadow 调整点 锚点
* @param adjustingId 正在操作的 调整点 id
* @returns
*/
static createAnchorShape(
render: Render,
graph: Konva.Group,
anchor: Types.GraphAnchor,
anchorShadow: Konva.Circle,
adjustType: string,
adjustGroupId: string
): Konva.Shape {
console.log('请实现 createAnchorShape', render, graph, anchor, anchorShadow, adjustingId, adjustGroupId)
return new Konva.Shape()
}
/**
* 调整 图形
* @param render 渲染实例
* @param graph 图形
* @param graphSnap 图形 的 备份
* @param rect 当前 调整点
* @param rects 所有 调整点
* @param startPoint 鼠标按下位置
* @param endPoint 鼠标拖动位置
*/
static adjust(
render: Render,
graph: Konva.Group,
graphSnap: Konva.Group,
rect: Types.GraphAnchorShape,
rects: Types.GraphAnchorShape[],
startPoint: Konva.Vector2d,
endPoint: Konva.Vector2d
) {
console.log('请实现 updateAnchorShadows', render, graph, rect, startPoint, endPoint)
}
//
protected render: Render
group: Konva.Group
id: string // 就是 group 的id
/**
* 鼠标按下位置
*/
protected dropPoint: Konva.Vector2d = { x: 0, y: 0 }
/**
* 调整点 定义
*/
protected anchors: Types.GraphAnchor[] = []
/**
* 调整点 的 锚点
*/
protected anchorShadows: Konva.Circle[] = []
/**
* 调整点 定义
*/
protected linkAnchors: Types.LinkDrawPoint[] = []
/**
* 连接点 的 锚点
*/
protected linkAnchorShadows: Konva.Circle[] = []
constructor(
render: Render,
dropPoint: Konva.Vector2d,
config: {
anchors: Types.GraphAnchor[]
linkAnchors: Types.AssetInfoPoint[]
}
) {
this.render = render
this.dropPoint = dropPoint
this.id = nanoid()
this.group = new Konva.Group({
id: this.id,
name: 'asset',
assetType: Types.AssetType.Graph
})
// 调整点 定义
this.anchors = config.anchors.map((o) => ({
...o,
// 补充信息
name: 'anchor',
groupId: this.group.id()
}))
// 记录在 group 中
this.group.setAttr('anchors', this.anchors)
// 新建 调整点 的 锚点
for (const anchor of this.anchors) {
const circle = new Konva.Circle({
adjustType: anchor.adjustType,
name: anchor.name,
radius: 0
// radius: this.render.toStageValue(1),
// fill: 'red'
})
this.anchorShadows.push(circle)
this.group.add(circle)
}
// 连接点 定义
this.linkAnchors = config.linkAnchors.map(
(o) =>
({
...o,
id: nanoid(),
groupId: this.group.id(),
visible: false,
pairs: [],
direction: o.direction,
alias: o.alias
}) as Types.LinkDrawPoint
)
// 连接点信息
this.group.setAttrs({
points: this.linkAnchors
})
// 新建 连接点 的 锚点
for (const point of this.linkAnchors) {
const circle = new Konva.Circle({
name: 'link-anchor',
id: point.id,
x: point.x,
y: point.y,
radius: this.render.toStageValue(1),
stroke: 'rgba(0,0,255,1)',
strokeWidth: this.render.toStageValue(2),
visible: false,
direction: point.direction,
alias: point.alias
})
this.linkAnchorShadows.push(circle)
this.group.add(circle)
}
this.group.on('mouseenter', () => {
// 显示 连接点
this.render.linkTool.pointsVisible(true, this.group)
})
this.group.on('mouseleave', () => {
// 隐藏 连接点
this.render.linkTool.pointsVisible(false, this.group)
// 隐藏 hover 框
this.group.findOne('#hoverRect')?.visible(false)
})
this.render.layer.add(this.group)
this.render.redraw()
}
/**
* 调整进行时
* @param point 鼠标位置 相对位置
*/
abstract drawMove(point: Konva.Vector2d): void
/**
* 调整结束
*/
abstract drawEnd(): void
}
这里的：
- 静态方法，相当定义了绘制图形必要的工具方法，具体实现交给具体的图形类定义；
- 接着是绘制图形必要的属性及其初始化；
- 最后，抽象方法约束了图形实例必要的方法。
绘制 圆/椭形
图形是可以调整的，这里 圆/椭形 拥有 8 个 调整点：
还要考虑图形被旋转后，依然能合理调整：
调整本身也是支持磁贴的：
图形也支持 连接点：
图形类 - Circle
// src/Render/graphs/Circle.ts
// 略
/**
* 图形 圆/椭圆
*/
export class Circle extends BaseGraph {
// 实现：更新 图形 的 调整点 的 锚点位置
static override updateAnchorShadows(
width: number,
height: number,
rotate: number,
anchorShadows: Konva.Circle[]
): void {
for (const shadow of anchorShadows) {
switch (shadow.attrs.id) {
case 'top':
shadow.position({
x: width / 2,
y: 0
})
break
case 'bottom':
shadow.position({
x: width / 2,
y: height
})
break
case 'left':
shadow.position({
x: 0,
y: height / 2
})
break
case 'right':
shadow.position({
x: width,
y: height / 2
})
break
case 'top-left':
shadow.position({
x: 0,
y: 0
})
break
case 'top-right':
shadow.position({
x: width,
y: 0
})
break
case 'bottom-left':
shadow.position({
x: 0,
y: height
})
break
case 'bottom-right':
shadow.position({
x: width,
y: height
})
break
}
}
}
// 实现：更新 图形 的 连接点 的 锚点位置
static override updateLinkAnchorShadows(
width: number,
height: number,
rotate: number,
linkAnchorShadows: Konva.Circle[]
): void {
for (const shadow of linkAnchorShadows) {
switch (shadow.attrs.alias) {
case 'top':
shadow.position({
x: width / 2,
y: 0
})
break
case 'bottom':
shadow.position({
x: width / 2,
y: height
})
break
case 'left':
shadow.position({
x: 0,
y: height / 2
})
break
case 'right':
shadow.position({
x: width,
y: height / 2
})
break
case 'center':
shadow.position({
x: width / 2,
y: height / 2
})
break
}
}
}
// 实现：生成 调整点
static createAnchorShape(
render: Types.Render,
graph: Konva.Group,
anchor: Types.GraphAnchor,
anchorShadow: Konva.Circle,
adjustType: string,
adjustGroupId: string
): Konva.Shape {
// stage 状态
const stageState = render.getStageState()
const x = render.toStageValue(anchorShadow.getAbsolutePosition().x - stageState.x),
y = render.toStageValue(anchorShadow.getAbsolutePosition().y - stageState.y)
const offset = render.pointSize + 5
const shape = new Konva.Line({
name: 'anchor',
anchor: anchor,
//
// stroke: colorMap[anchor.id] ?? 'rgba(0,0,255,0.2)',
stroke:
adjustType === anchor.adjustType && graph.id() === adjustGroupId
? 'rgba(0,0,255,0.8)'
: 'rgba(0,0,255,0.2)',
strokeWidth: render.toStageValue(2),
// 位置
x,
y,
// 路径
points:
{
'top-left': _.flatten([
[-offset, offset / 2],
[-offset, -offset],
[offset / 2, -offset]
]),
top: _.flatten([
[-offset, -offset],
[offset, -offset]
]),
'top-right': _.flatten([
[-offset / 2, -offset],
[offset, -offset],
[offset, offset / 2]
]),
right: _.flatten([
[offset, -offset],
[offset, offset]
]),
'bottom-right': _.flatten([
[-offset / 2, offset],
[offset, offset],
[offset, -offset / 2]
]),
bottom: _.flatten([
[-offset, offset],
[offset, offset]
]),
'bottom-left': _.flatten([
[-offset, -offset / 2],
[-offset, offset],
[offset / 2, offset]
]),
left: _.flatten([
[-offset, -offset],
[-offset, offset]
])
}[anchor.id] ?? [],
// 旋转角度
rotation: graph.getAbsoluteRotation()
})
shape.on('mouseenter', () => {
shape.stroke('rgba(0,0,255,0.8)')
document.body.style.cursor = 'move'
})
shape.on('mouseleave', () => {
shape.stroke(shape.attrs.adjusting ? 'rgba(0,0,255,0.8)' : 'rgba(0,0,255,0.2)')
document.body.style.cursor = shape.attrs.adjusting ? 'move' : 'default'
})
return shape
}
// 实现：调整 图形
static override adjust(
render: Types.Render,
graph: Konva.Group,
graphSnap: Konva.Group,
shapeRecord: Types.GraphAnchorShape,
shapeRecords: Types.GraphAnchorShape[],
startPoint: Konva.Vector2d,
endPoint: Konva.Vector2d
) {
// 目标 圆/椭圆
const circle = graph.findOne('.graph') as Konva.Ellipse
// 镜像
const circleSnap = graphSnap.findOne('.graph') as Konva.Ellipse
// 调整点 锚点
const anchors = (graph.find('.anchor') ?? []) as Konva.Circle[]
// 连接点 锚点
const linkAnchors = (graph.find('.link-anchor') ?? []) as Konva.Circle[]
const { shape: adjustShape } = shapeRecord
if (circle && circleSnap) {
let [graphWidth, graphHeight] = [graph.width(), graph.height()]
const [graphRotation, anchorId, ex, ey] = [
Math.round(graph.rotation()),
adjustShape.attrs.anchor?.id,
endPoint.x,
endPoint.y
]
let anchorShadow: Konva.Circle | undefined, anchorShadowAcross: Konva.Circle | undefined
switch (anchorId) {
case 'top':
{
anchorShadow = graphSnap.findOne(`#top`)
anchorShadowAcross = graphSnap.findOne(`#bottom`)
}
break
case 'bottom':
{
anchorShadow = graphSnap.findOne(`#bottom`)
anchorShadowAcross = graphSnap.findOne(`#top`)
}
break
case 'left':
{
anchorShadow = graphSnap.findOne(`#left`)
anchorShadowAcross = graphSnap.findOne(`#right`)
}
break
case 'right':
{
anchorShadow = graphSnap.findOne(`#right`)
anchorShadowAcross = graphSnap.findOne(`#left`)
}
break
case 'top-left':
{
anchorShadow = graphSnap.findOne(`#top-left`)
anchorShadowAcross = graphSnap.findOne(`#bottom-right`)
}
break
case 'top-right':
{
anchorShadow = graphSnap.findOne(`#top-right`)
anchorShadowAcross = graphSnap.findOne(`#bottom-left`)
}
break
case 'bottom-left':
{
anchorShadow = graphSnap.findOne(`#bottom-left`)
anchorShadowAcross = graphSnap.findOne(`#top-right`)
}
break
case 'bottom-right':
{
anchorShadow = graphSnap.findOne(`#bottom-right`)
anchorShadowAcross = graphSnap.findOne(`#top-left`)
}
break
}
if (anchorShadow && anchorShadowAcross) {
const { x: sx, y: sy } = anchorShadow.getAbsolutePosition()
const { x: ax, y: ay } = anchorShadowAcross.getAbsolutePosition()
// anchorShadow：它是当前操作的 调整点 锚点
// anchorShadowAcross：它是当前操作的 调整点 反方向对面的 锚点
// 调整大小
{
// 略
// 计算比较复杂，不一定是最优方案，详情请看工程代码。
// 基本逻辑：
// 1、通过鼠标移动，计算当前鼠标位置、当前操作的 调整点 锚点 位置（原位置） 分别与 anchorShadowAcross（原位置）的距离；
// 2、 保持 anchorShadowAcross 位置固定，通过上面两距离的变化比例，计算最新的宽高大小；
// 3、期间要约束不同角度不同方向的宽高处理，有的只改变宽、有的只改变高、有的同时改变宽和高。
}
// 调整位置
{
// 略
// 计算比较复杂，不一定是最优方案，详情请看工程代码。
// 基本逻辑：
// 利用三角函数，通过最新的宽高，调整图形的坐标。
}
}
// 更新 圆/椭圆 大小
circle.x(graphWidth / 2)
circle.radiusX(graphWidth / 2)
circle.y(graphHeight / 2)
circle.radiusY(graphHeight / 2)
// 更新 调整点 的 锚点 位置
Circle.updateAnchorShadows(graphWidth, graphHeight, graphRotation, anchors)
// 更新 图形 的 连接点 的 锚点位置
Circle.updateLinkAnchorShadows(graphWidth, graphHeight, graphRotation, linkAnchors)
// stage 状态
const stageState = render.getStageState()
// 更新 调整点 位置
for (const anchor of anchors) {
for (const { shape } of shapeRecords) {
if (shape.attrs.anchor?.adjustType === anchor.attrs.adjustType) {
const anchorShadow = graph.findOne(`#${anchor.attrs.id}`)
if (anchorShadow) {
shape.position({
x: render.toStageValue(anchorShadow.getAbsolutePosition().x - stageState.x),
y: render.toStageValue(anchorShadow.getAbsolutePosition().y - stageState.y)
})
shape.rotation(graph.getAbsoluteRotation())
}
}
}
}
}
}
/**
* 默认图形大小
*/
static size = 100
/**
* 圆/椭圆 对应的 Konva 实例
*/
private circle: Konva.Ellipse
constructor(render: Types.Render, dropPoint: Konva.Vector2d) {
super(render, dropPoint, {
// 定义了 8 个 调整点
anchors: [
{ adjustType: 'top' },
{ adjustType: 'bottom' },
{ adjustType: 'left' },
{ adjustType: 'right' },
{ adjustType: 'top-left' },
{ adjustType: 'top-right' },
{ adjustType: 'bottom-left' },
{ adjustType: 'bottom-right' }
].map((o) => ({
adjustType: o.adjustType, // 调整点 类型定义
type: Types.GraphType.Circle // 记录所属 图形
})),
linkAnchors: [
{ x: 0, y: 0, alias: 'top', direction: 'top' },
{ x: 0, y: 0, alias: 'bottom', direction: 'bottom' },
{ x: 0, y: 0, alias: 'left', direction: 'left' },
{ x: 0, y: 0, alias: 'right', direction: 'right' },
{ x: 0, y: 0, alias: 'center' }
] as Types.AssetInfoPoint[]
})
// 新建 圆/椭圆
this.circle = new Konva.Ellipse({
name: 'graph',
x: 0,
y: 0,
radiusX: 0,
radiusY: 0,
stroke: 'black',
strokeWidth: 1
})
// 加入
this.group.add(this.circle)
// 鼠标按下位置 作为起点
this.group.position(this.dropPoint)
}
// 实现：拖动进行时
override drawMove(point: Konva.Vector2d): void {
// 鼠标拖动偏移量
let offsetX = point.x - this.dropPoint.x,
offsetY = point.y - this.dropPoint.y
// 确保不翻转
if (offsetX < 1) {
offsetX = 1
}
if (offsetY < 1) {
offsetY = 1
}
// 半径
const radiusX = offsetX / 2,
radiusY = offsetY / 2
// 圆/椭圆 位置大小
this.circle.x(radiusX)
this.circle.y(radiusY)
this.circle.radiusX(radiusX)
this.circle.radiusY(radiusY)
// group 大小
this.group.size({
width: offsetX,
height: offsetY
})
// 更新 图形 的 调整点 的 锚点位置
Circle.updateAnchorShadows(offsetX, offsetY, 1, this.anchorShadows)
// 更新 图形 的 连接点 的 锚点位置
Circle.updateLinkAnchorShadows(offsetX, offsetY, 1, this.linkAnchorShadows)
// 重绘
this.render.redraw([Draws.GraphDraw.name, Draws.LinkDraw.name])
}
// 实现：拖动结束
override drawEnd(): void {
if (this.circle.radiusX() <= 1 && this.circle.radiusY() <= 1) {
// 加入只点击，无拖动
// 默认大小
const width = Circle.size,
height = width
const radiusX = Circle.size / 2,
radiusY = radiusX
// 圆/椭圆 位置大小
this.circle.x(radiusX)
this.circle.y(radiusY)
this.circle.radiusX(radiusX - this.circle.strokeWidth())
this.circle.radiusY(radiusY - this.circle.strokeWidth())
// group 大小
this.group.size({
width,
height
})
// 更新 图形 的 调整点 的 锚点位置
Circle.updateAnchorShadows(width, height, 1, this.anchorShadows)
// 更新 图形 的 连接点 的 锚点位置
Circle.updateLinkAnchorShadows(width, height, 1, this.linkAnchorShadows)
// 对齐线清除
this.render.attractTool.alignLinesClear()
// 重绘
this.render.redraw([Draws.GraphDraw.name, Draws.LinkDraw.name])
}
}
}
GraphHandlers
// src/Render/handlers/GraphHandlers.ts
// 略
export class GraphHandlers implements Types.Handler {
// 略
/**
* 新建图形中
*/
graphing = false
/**
* 当前新建图形类型
*/
currentGraph: Graphs.BaseGraph | undefined
/**
* 获取鼠标位置，并处理为 相对大小
* @param attract 含磁贴计算
* @returns
*/
getStagePoint(attract = false) {
const pos = this.render.stage.getPointerPosition()
if (pos) {
const stageState = this.render.getStageState()
if (attract) {
// 磁贴
const { pos: transformerPos } = this.render.attractTool.attractPoint(pos)
return {
x: this.render.toStageValue(transformerPos.x - stageState.x),
y: this.render.toStageValue(transformerPos.y - stageState.y)
}
} else {
return {
x: this.render.toStageValue(pos.x - stageState.x),
y: this.render.toStageValue(pos.y - stageState.y)
}
}
}
return null
}
handlers = {
stage: {
mousedown: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['mousedown']>) => {
if (this.render.graphType) {
// 选中图形类型，开始
if (e.target === this.render.stage) {
this.graphing = true
this.render.selectionTool.selectingClear()
const point = this.getStagePoint()
if (point) {
if (this.render.graphType === Types.GraphType.Circle) {
// 新建 圆/椭圆 实例
this.currentGraph = new Graphs.Circle(this.render, point)
}
}
}
}
},
mousemove: () => {
if (this.graphing) {
if (this.currentGraph) {
const pos = this.getStagePoint(true)
if (pos) {
// 新建并马上调整图形
this.currentGraph.drawMove(pos)
}
}
}
},
mouseup: () => {
if (this.graphing) {
if (this.currentGraph) {
// 调整结束
this.currentGraph.drawEnd()
}
// 调整结束
this.graphing = false
// 清空图形类型选择
this.render.changeGraphType()
// 对齐线清除
this.render.attractTool.alignLinesClear()
// 重绘
this.render.redraw([Draws.GraphDraw.name, Draws.LinkDraw.name])
}
}
}
}
}
GraphDraw
// src/Render/draws/GraphDraw.ts
// 略
export interface GraphDrawState {
/**
* 调整中
*/
adjusting: boolean
/**
* 调整中 id
*/
adjustType: string
}
// 略
export class GraphDraw extends Types.BaseDraw implements Types.Draw {
// 略
state: GraphDrawState = {
adjusting: false,
adjustType: ''
}
/**
* 鼠标按下 调整点 位置
*/
startPoint: Konva.Vector2d = { x: 0, y: 0 }
/**
* 图形 group 镜像
*/
graphSnap: Konva.Group | undefined
constructor(render: Types.Render, layer: Konva.Layer, option: GraphDrawOption) {
super(render, layer)
this.option = option
this.group.name(this.constructor.name)
}
/**
* 获取鼠标位置，并处理为 相对大小
* @param attract 含磁贴计算
* @returns
*/
getStagePoint(attract = false) {
const pos = this.render.stage.getPointerPosition()
if (pos) {
const stageState = this.render.getStageState()
if (attract) {
// 磁贴
const { pos: transformerPos } = this.render.attractTool.attractPoint(pos)
return {
x: this.render.toStageValue(transformerPos.x - stageState.x),
y: this.render.toStageValue(transformerPos.y - stageState.y)
}
} else {
return {
x: this.render.toStageValue(pos.x - stageState.x),
y: this.render.toStageValue(pos.y - stageState.y)
}
}
}
return null
}
// 调整 预处理、定位静态方法
adjusts(
shapeDetailList: {
graph: Konva.Group
shapeRecords: { shape: Konva.Shape; anchorShadow: Konva.Circle }[]
}[]
) {
for (const { shapeRecords, graph } of shapeDetailList) {
for (const { shape } of shapeRecords) {
shape.setAttr('adjusting', false)
}
for (const shapeRecord of shapeRecords) {
const { shape } = shapeRecord
// 鼠标按下
shape.on('mousedown', () => {
this.state.adjusting = true
this.state.adjustType = shape.attrs.anchor?.adjustType
this.state.adjustGroupId = graph.id()
shape.setAttr('adjusting', true)
const pos = this.getStagePoint()
if (pos) {
this.startPoint = pos
// 图形 group 镜像，用于计算位置、大小的偏移
this.graphSnap = graph.clone()
}
})
// 调整中
this.render.stage.on('mousemove', () => {
if (this.state.adjusting && this.graphSnap) {
if (shape.attrs.anchor?.type === Types.GraphType.Circle) {
// 调整 圆/椭圆 图形
if (shape.attrs.adjusting) {
const pos = this.getStagePoint(true)
if (pos) {
// 使用 圆/椭圆 静态处理方法
Graphs.Circle.adjust(
this.render,
graph,
this.graphSnap,
shapeRecord,
shapeRecords,
this.startPoint,
pos
)
// 重绘
this.render.redraw([Draws.GraphDraw.name, Draws.LinkDraw.name])
}
}
}
}
})
// 调整结束
this.render.stage.on('mouseup', () => {
this.state.adjusting = false
this.state.adjustType = ''
this.state.adjustGroupId = ''
// 恢复显示所有 调整点
for (const { shape } of shapeRecords) {
shape.opacity(1)
shape.setAttr('adjusting', false)
shape.stroke('rgba(0,0,255,0.2)')
document.body.style.cursor = 'default'
}
// 销毁 镜像
this.graphSnap?.destroy()
// 对齐线清除
this.render.attractTool.alignLinesClear()
})
this.group.add(shape)
}
}
}
override draw() {
this.clear()
// 所有图形
const graphs = this.render.layer
.find('.asset')
.filter((o) => o.attrs.assetType === Types.AssetType.Graph) as Konva.Group[]
const shapeDetailList: {
graph: Konva.Group
shapeRecords: { shape: Konva.Shape; anchorShadow: Konva.Circle }[]
}[] = []
for (const graph of graphs) {
// 非选中状态才显示 调整点
if (!graph.attrs.selected) {
const anchors = (graph.attrs.anchors ?? []) as Types.GraphAnchor[]
const shapeRecords: { shape: Konva.Shape; anchorShadow: Konva.Circle }[] = []
// 根据 调整点 信息，创建
for (const anchor of anchors) {
// 调整点 的显示 依赖其隐藏的 锚点 位置、大小等信息
const anchorShadow = graph.findOne(`#${anchor.id}`) as Konva.Circle
if (anchorShadow) {
const shape = Graphs.Circle.createAnchorShape(
this.render,
graph,
anchor,
anchorShadow,
this.state.adjustingId,
this.state.adjustGroupId
)
shapeRecords.push({ shape, anchorShadow })
}
}
shapeDetailList.push({
graph,
shapeRecords
})
}
}
this.adjusts(shapeDetailList)
}
}
稍显臃肿，后面慢慢优化吧 -_-
canvas2svg 打补丁
上面已经实现了绘制图形（圆/椭形），但是导出 svg 的时候报错了。经过错误定位以及源码阅读，发现：
1、当 Konva.Group 包含 Konva.Ellipse 的时候，无法导出 svg 文件
2、对 Konva.Ellipse 调整如 radiusX、radiusY 属性时，无法正确输出 path 路径
1、canvas2svg 尝试给 g 节点赋予 path 属性，导致异常报错。
现通过 hack __applyCurrentDefaultPath 方法，增加处理 nodeName === 'g' 的场景
2、查看 Konva.Ellipse.prototype._sceneFunc 方法源码，Konva 绘制 Ellipse 是通过 canvas 的 arc + scale 实现的，对应代码注释 A。
实际效果，无法仿照 canvas 的平均 scale，会出现 stroke 粗细不一。
因此，尝试通过识别 scale 修改 path 特征，修复此问题。
// src/Render/tools/ImportExportTool.ts
C2S.prototype.__applyCurrentDefaultPath = function () {
// 补丁：修复以下问题：
// 1、当 Konva.Group 包含 Konva.Ellipse 的时候，无法导出 svg 文件
// 2、对 Konva.Ellipse 调整如 radiusX、radiusY 属性时，无法正确输出 path 路径
//
// PS:
// 1、canvas2svg 尝试给 g 节点赋予 path 属性，导致异常报错。
// 现通过 hack __applyCurrentDefaultPath 方法，增加处理 nodeName === 'g' 的场景
//
// 2、查看 Konva.Ellipse.prototype._sceneFunc 方法源码，
// Konva 绘制 Ellipse 是通过 canvas 的 arc + scale 实现的，对应代码注释 A，
// 实际效果，无法仿照 canvas 的平均 scale，会出现 stroke 粗细不一。
// 因此，尝试通过识别 scale 修改 path 特征，修复此问题。
//
// （以上 hack 仅针对示例绘制 图形 时的特征进行处理，并未深入研究 canvas2svg 为何会进入错误的逻辑）
if (this.__currentElement.nodeName === 'g') {
const g = this.__currentElement.querySelector('g')
if (g) {
// 注释 A
// const d = this.__currentDefaultPath
// const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') as SVGElement
// path.setAttribute('d', d)
// path.setAttribute('fill', 'none')
// g.append(path)
const scale = g.getAttribute('transform')
if (scale) {
const match = scale.match(/scale\(([^),]+),([^)]+)\)/)
if (match) {
const [sx, sy] = [parseFloat(match[1]), parseFloat(match[2])]
let d = this.__currentDefaultPath
const reg = /A ([^ ]+) ([^ ]+) /
const match2 = d.match(reg)
if (match2) {
const [rx, ry] = [parseFloat(match2[1]), parseFloat(match2[2])]
d = d.replace(reg, `A ${rx * sx} ${ry * sy} `)
const path = document.createElementNS(
'http://www.w3.org/2000/svg',
'path'
) as SVGElement
path.setAttribute('d', d)
path.setAttribute('fill', 'none')
this.__currentElement.append(path)
}
}
} else {
const d = this.__currentDefaultPath
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') as SVGElement
path.setAttribute('d', d)
path.setAttribute('fill', 'none')
this.__currentElement.append(path)
}
}
console.warn(
'[Hacked] Attempted to apply path command to node ' + this.__currentElement.nodeName
)
return
}
// 原逻辑
if (this.__currentElement.nodeName === 'path') {
const d = this.__currentDefaultPath
this.__currentElement.setAttribute('d', d)
} else {
throw new Error('Attempted to apply path command to node ' + this.__currentElement.nodeName)
}
}
以上 hack 仅针对示例绘制 图形 时的特征进行处理，并未深入研究 canvas2svg 为何会进入错误的逻辑
拐点旋转修复
测试发现，连接线 的 拐点 并没有能跟随旋转角度调整坐标，因此补充一个修复：
// src/Render/handlers/SelectionHandlers.ts
// 略
/**
* 矩阵变换：坐标系中的一个点，围绕着另外一个点进行旋转
* - - - - - - - -
* |x`| |cos -sin| |x-a| |a|
* | | = | | | | +
* |y`| |sin cos| |y-b| |b|
* - - - - - - - -
* @param x 目标节点坐标 x
* @param y 目标节点坐标 y
* @param centerX 围绕的点坐标 x
* @param centerY 围绕的点坐标 y
* @param angle 旋转角度
* @returns
*/
rotatePoint(x: number, y: number, centerX: number, centerY: number, angle: number) {
// 将角度转换为弧度
const radians = (angle * Math.PI) / 180
// 计算旋转后的坐标
const newX = Math.cos(radians) * (x - centerX) - Math.sin(radians) * (y - centerY) + centerX
const newY = Math.sin(radians) * (x - centerX) + Math.cos(radians) * (y - centerY) + centerY
return { x: newX, y: newY }
}
lastRotation = 0
// 略
handlers = {
// 略
transformer: {
transform: () => {
// 旋转时，拐点也要跟着动
const back = this.render.transformer.findOne('.back')
if (back) {
// stage 状态
const stageState = this.render.getStageState()
const { x, y, width, height } = back.getClientRect()
const rotation = back.getAbsoluteRotation() - this.lastRotation
const centerX = x + width / 2
const centerY = y + height / 2
const groups = this.render.transformer.nodes()
const points = groups.reduce((ps, group) => {
return ps.concat(Array.isArray(group.getAttr('points')) ? group.getAttr('points') : [])
}, [] as Types.LinkDrawPoint[])
const pairs = points.reduce((ps, point) => {
return ps.concat(point.pairs ? point.pairs.filter((o) => !o.disabled) : [])
}, [] as Types.LinkDrawPair[])
for (const pair of pairs) {
const fromGroup = groups.find((o) => o.id() === pair.from.groupId)
const toGroup = groups.find((o) => o.id() === pair.to.groupId)
// 必须成对移动才记录
if (fromGroup && toGroup) {
// 移动
if (fromGroup.attrs.manualPointsMap && fromGroup.attrs.manualPointsMapBefore) {
let manualPoints = fromGroup.attrs.manualPointsMap[pair.id]
const manualPointsBefore = fromGroup.attrs.manualPointsMapBefore[pair.id]
if (Array.isArray(manualPoints) && Array.isArray(manualPointsBefore)) {
manualPoints = manualPointsBefore.map((o: Types.ManualPoint) => {
const { x, y } = this.rotatePoint(
this.render.toBoardValue(o.x) + stageState.x,
this.render.toBoardValue(o.y) + stageState.y,
centerX,
centerY,
rotation
)
return {
x: this.render.toStageValue(x - stageState.x),
y: this.render.toStageValue(y - stageState.y)
}
})
fromGroup.setAttr('manualPointsMap', {
...fromGroup.attrs.manualPointsMap,
[pair.id]: manualPoints
})
}
}
}
}
}
// 重绘
this.render.redraw([Draws.GraphDraw.name, Draws.LinkDraw.name, Draws.PreviewDraw.name])
}
}
// 略
}
Thanks watching~
More Stars please！勾勾手指~
