- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
请大家动动小手,给我一个免费的 Star 吧~ 。
大家如果发现了 Bug,欢迎来提 Issue 哟~ 。
github源码 。
gitee源码 。
示例地址 。
不知不觉来到第 10 章了,感觉接近尾声了。。.
先看效果:
这里交互有两个部分: 1、节点之间的对齐线 2、对齐磁贴 。
多选的情况下,效果是一样的:
主要逻辑会放在控制“选择”的代码文件里: src\Render\handlers\SelectionHandlers.ts 这里需要一些辅助都定义:
interface SortItem {
id?: number // 有 id 就是其他节点,否则就是 选择目标
value: number // 左、垂直中、右的 x 坐标值; 上、水平中、下的 y 坐标值;
}
type SortItemPair = [SortItem, SortItem]
尝试画个图说明一下上面的含义:
这里以纵向(基于 x 坐标值)为例:
这里的 x1~x9,就是 SortItem,横向(基于 y 坐标值)同理,特别地,如果是正在拖动的目标节点,会把该节点的 _id 记录在 SortItem 以示区分.
会存在一个处理,把一个方向上的所有 x 坐标进行从小到大的排序,然后一双一双的遍历,需要符合以下条件“必须分别属于相邻的两个节点”的 SortItem 对,也就是 SortItemPair.
在查找所有 SortItemPair 的同时,只会更新并记录节点距离最短的那些 SortItemPair(可能会存在多个).
核心逻辑代码:
// 磁吸逻辑
attract = (newPos: Konva.Vector2d) => {
// 对齐线清除
this.alignLinesClear()
// stage 状态
const stageState = this.render.getStageState()
const width = this.render.transformer.width()
const height = this.render.transformer.height()
let newPosX = newPos.x
let newPosY = newPos.y
let isAttract = false
let pairX: SortItemPair | null = null
let pairY: SortItemPair | null = null
// 对齐线 磁吸逻辑
if (this.render.config.attractNode) {
// 横向所有需要判断对齐的 x 坐标
const sortX: Array<SortItem> = []
// 纵向向所有需要判断对齐的 y 坐标
const sortY: Array<SortItem> = []
// 选择目标所有的对齐 x
sortX.push(
{
value: this.render.toStageValue(newPos.x - stageState.x) // 左
},
{
value: this.render.toStageValue(newPos.x - stageState.x + width / 2) // 垂直中
},
{
value: this.render.toStageValue(newPos.x - stageState.x + width) // 右
}
)
// 选择目标所有的对齐 y
sortY.push(
{
value: this.render.toStageValue(newPos.y - stageState.y) // 上
},
{
value: this.render.toStageValue(newPos.y - stageState.y + height / 2) // 水平中
},
{
value: this.render.toStageValue(newPos.y - stageState.y + height) // 下
}
)
// 拖动目标
const targetIds = this.render.selectionTool.selectingNodes.map((o) => o._id)
// 除拖动目标的其他
const otherNodes = this.render.layer.getChildren((node) => !targetIds.includes(node._id))
// 其他节点所有的 x / y 坐标
for (const node of otherNodes) {
// x
sortX.push(
{
id: node._id,
value: node.x() // 左
},
{
id: node._id,
value: node.x() + node.width() / 2 // 垂直中
},
{
id: node._id,
value: node.x() + node.width() // 右
}
)
// y
sortY.push(
{
id: node._id,
value: node.y() // 上
},
{
id: node._id,
value: node.y() + node.height() / 2 // 水平中
},
{
id: node._id,
value: node.y() + node.height() // 下
}
)
}
// 排序
sortX.sort((a, b) => a.value - b.value)
sortY.sort((a, b) => a.value - b.value)
// x 最短距离
let XMin = Infinity
// x 最短距离的【对】(多个)
let pairXMin: Array<SortItemPair> = []
// y 最短距离
let YMin = Infinity
// y 最短距离的【对】(多个)
let pairYMin: Array<SortItemPair> = []
// 一对对比较距离,记录最短距离的【对】
// 必须是 选择目标 与 其他节点 成【对】
// 可能有多个这样的【对】
for (let i = 0; i < sortX.length - 1; i++) {
// 相邻两个点,必须为 目标节点 + 非目标节点
if (
(sortX[i].id === void 0 && sortX[i + 1].id !== void 0) ||
(sortX[i].id !== void 0 && sortX[i + 1].id === void 0)
) {
// 相邻两个点的 x 距离
const offset = Math.abs(sortX[i].value - sortX[i + 1].value)
if (offset < XMin) {
// 更新 x 最短距离 记录
XMin = offset
// 更新 x 最短距离的【对】 记录
pairXMin = [[sortX[i], sortX[i + 1]]]
} else if (offset === XMin) {
// 存在多个 x 最短距离
pairXMin.push([sortX[i], sortX[i + 1]])
}
}
}
for (let i = 0; i < sortY.length - 1; i++) {
// 相邻两个点,必须为 目标节点 + 非目标节点
if (
(sortY[i].id === void 0 && sortY[i + 1].id !== void 0) ||
(sortY[i].id !== void 0 && sortY[i + 1].id === void 0)
) {
// 相邻两个点的 y 距离
const offset = Math.abs(sortY[i].value - sortY[i + 1].value)
if (offset < YMin) {
// 更新 y 最短距离 记录
YMin = offset
// 更新 y 最短距离的【对】 记录
pairYMin = [[sortY[i], sortY[i + 1]]]
} else if (offset === YMin) {
// 存在多个 y 最短距离
pairYMin.push([sortY[i], sortY[i + 1]])
}
}
}
// 取第一【对】,用于判断距离是否在阈值内
if (pairXMin[0]) {
if (Math.abs(pairXMin[0][0].value - pairXMin[0][1].value) < this.render.bgSize / 2) {
pairX = pairXMin[0]
}
}
if (pairYMin[0]) {
if (Math.abs(pairYMin[0][0].value - pairYMin[0][1].value) < this.render.bgSize / 2) {
pairY = pairYMin[0]
}
}
// 优先对齐节点
// 存在 1或多个 x 最短距离 满足阈值
if (pairX?.length === 2) {
for (const pair of pairXMin) {
// 【对】里的那个非目标节点
const other = pair.find((o) => o.id !== void 0)
if (other) {
// x 对齐线
const line = new Konva.Line({
points: _.flatten([
[other.value, this.render.toStageValue(-stageState.y)],
[other.value, this.render.toStageValue(this.render.stage.height() - stageState.y)]
]),
stroke: 'blue',
strokeWidth: this.render.toStageValue(1),
dash: [4, 4],
listening: false
})
this.alignLines.push(line)
this.render.layerCover.add(line)
}
}
// 磁贴第一个【对】
const target = pairX.find((o) => o.id === void 0)
const other = pairX.find((o) => o.id !== void 0)
if (target && other) {
// 磁铁坐标值
newPosX = newPosX - this.render.toBoardValue(target.value - other.value)
isAttract = true
}
}
// 存在 1或多个 y 最短距离 满足阈值
if (pairY?.length === 2) {
for (const pair of pairYMin) {
// 【对】里的那个非目标节点
const other = pair.find((o) => o.id !== void 0)
if (other) {
// y 对齐线
const line = new Konva.Line({
points: _.flatten([
[this.render.toStageValue(-stageState.x), other.value],
[this.render.toStageValue(this.render.stage.width() - stageState.x), other.value]
]),
stroke: 'blue',
strokeWidth: this.render.toStageValue(1),
dash: [4, 4],
listening: false
})
this.alignLines.push(line)
this.render.layerCover.add(line)
}
}
// 磁贴第一个【对】
const target = pairY.find((o) => o.id === void 0)
const other = pairY.find((o) => o.id !== void 0)
if (target && other) {
// 磁铁坐标值
newPosY = newPosY - this.render.toBoardValue(target.value - other.value)
isAttract = true
}
}
}
虽然代码比较冗长,不过逻辑相对还是比较清晰,找到满足条件(小于阈值,足够近,这里阈值为背景网格的一半大小)的 SortItemPair,就可以根据记录的坐标值大小,定义并绘制相应的线条(添加到 layerCover 中),记录在某个变量中:
// 对齐线
alignLines: Konva.Line[] = []
// 对齐线清除
alignLinesClear() {
for (const line of this.alignLines) {
line.remove()
}
this.alignLines = []
}
在适合的时候,执行 alignLinesClear 清空失效的对齐线即可.
接下来,计划实现下面这些功能:
- 连接线
- 等等。。。
More Stars please!勾勾手指~ 。
源码 。
gitee源码 。
示例地址 。
最后此篇关于前端使用Konva实现可视化设计器(10)-对齐线的文章就讲到这里了,如果你想了解更多关于前端使用Konva实现可视化设计器(10)-对齐线的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
关闭。这个问题需要更多focused .它目前不接受答案。 想改善这个问题吗?更新问题,使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
.NET 框架:4.5.1 我在 Blend for visual studio 2015 中遇到一个奇怪的错误,我找不到它的来源。 如果我在 VS 中打开我的 WPF 解决方案,它会加载并运行良好。
我经常遇到这样的问题,与 Hierarchical RESTful URL design 非常相似 假设该服务仅提供用户上传文档。 POST, GET /accounts PUT, DELETE /a
在 Rails 应用程序中,我使用 devise 来管理我的用户,而我用来销毁 session 的链接不再有效。它正在工作,现在我添加了事件管理员,但没有。 我的链接是 :delete, :clas
我已经坚持了超过 24 小时,试图按照此处发布的其他解决方案进行操作,但我无法使其正常工作。我是 Rails 新手,需要帮助! 我想让我的/users/edit 页面正常工作,以便我可以简单地更改用户
Devise 在以下情况下不会使用户超时: 用户登录,关闭选项卡,然后在超时 + X 分钟内重新访问该 URL。用户仍处于登录状态。 如果选项卡已打开并且稍后刷新/单击,则超时可以正常工作。这意味着
我想使用这样的 slider 我希望该 slider 根据提供给它的值进行相应调整。到目前为止,我只能应用具有渐变效果的背景,但无法获得这种效果。请通过提供样式代码来帮助我。
您应该为每种方法创建一个请求/响应对象,还是应该为每个服务创建一个? 如果我在所有方法中使用它,我的服务请求对象中将只有 5 个不同的东西,因为我对几乎所有方法使用相同的输入。 响应对象将只有一个字典
我正在尝试在 REST 中对实体的附件进行建模。假设一个缺陷实体可以附加多个附件。每个附件都有描述和一些其他属性(上次修改时间、文件大小...)。附件本身是任何格式的文件(jpeg、doc ...)
我有以下表格: Blogs { BlogName } BlogPosts { BlogName, PostTitle } 博客文章同时建模一个实体和一个关系,根据 6nf(根据第三个宣言)这是无效的。
如果 A 类与 B、C 和 D 类中的每一个都有唯一的交互,那么交互的代码应该在 A 中还是在 B、C 和 D 中? 我正在编写一个小游戏,其中许多对象可以与其他对象进行独特的交互。例如,EMP点击
关于如何记住我与 Omniauth 一起工作似乎有些困惑。 根据这个wiki ,您需要在 OmniauthCallbacksController 中包含以下内容: remember_me(user)
设计问题: 使用 非线程安全 组件(集合,API,...)在/带有 多线程成分 ... 例子 : 组件 1 :多线程套接字服务器谁向消息处理程序发送消息... 组件 2 :非线程安全 消息处理程序 谁
我们目前正在设计一个 RESTful 应用程序。我们决定使用 XML 作为我们的基本表示。 我有以下关于在 XML 中设计/建模应用程序数据的问题。 在 XML 中进行数据建模的方法有哪些?从头开始然
我正在设计一个新的 XSD 来从业务合作伙伴那里获取积分信息。对于每笔交易,合作伙伴必须提供至少一种积分类型的积分值。我有以下几点:
设计支持多个版本的 API 的最佳方法是什么。我如何确保即使我的数据架构发生更改(微小更改),我的 api 的使用者也不会受到影响?任何引用架构、指南都非常有用。 最佳答案 Mark Nottingh
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭 4 年前。 Improv
我想用 php 创建一个网站,其工作方式与 https://www.bitcoins.lc/ 相同。确实,就每个页面上具有相同布局但内容会随着您更改链接/页面而改变而言,我如何在 php 中使用lay
我有一个关于编写 Swing UI 的问题。如果我想制作一个带有某些选项的软件,例如在第一个框架上,我有三个按钮(新建、选项、退出)。 现在,如果用户单击新按钮,我想将框架中的整个内容更改为其他内容。
我正在尝试找出并学习将应用程序拥有的一堆Docker容器移至Kubernetes的模式和最佳实践。诸如Pod设计,服务,部署之类的东西。例如,我可以创建一个其中包含单个Web和应用程序容器的Pod,但
我是一名优秀的程序员,十分优秀!