草庐IT

图形编辑器：排列移动功能的实现

前端西瓜哥 2023-04-13 原文

大家好，我是前端西瓜哥。这次来讲解图形编辑器排列（arrange）功能的实现。

先看效果。

有四种移动方式：

  1. 置顶（Front）：将指定的图形移动到顶部。
  2. 置底（Back）：将制定图形移动到底部。
  3. 上移一层（Forward）：将指定元素往上移一层。
  4. 下移一层（Backward）：将置顶元素往下移动一层。

需要注意保持被移动图形，要保持它们原来的相对顺序。

编辑器 github 地址：

https://github.com/F-star/suika

线上体验：

https://blog.fstars.wang/app/suika/

Front 置顶

置顶，是将图形放在最顶部的位置。

假设图形树对应的一个数组 graphs，需要被移动的元素集合为 movedGraphSet（Set 类型）。要做的是将这些元素移动到数组末尾。

图形是按照数组的顺序绘制的，后面绘制的会盖住前面的图形，所以是移动到末尾而不是开头。这点需要注意。

我们只需要递归 graphs，不在 movedGraphSet 中的元素搬到新的数组中，在 movedGraphSet 中的元素，放到 tailGraphs 数组中。

const front = (graphs: Graph[], movedGraphSet: Set<Graph>) => {
  const newGraphs: Graph[] = [];
  const tailGraphs: Graph[] = [];
  for (let i = 0; i < graphs.length; i++) {
    const graph = graphs[i];
    if (movedGraphSet.has(graph)) {
      tailGraphs.push(graph);
    } else {
      newGraphs.push(graph);
    }
  }
  newGraphs.push(...tailGraphs);
  return newGraphs;
};

图形树可能会是链表，或者有 group 的概念，实现代码或许不同，但思路是一样的。

Back 置底

置底同理。

这次是从右往左遍历。另外因为要减少数组搬移的操作，我们需要额外将数组做一个倒序。

往数组的头部插入新元素，是要将原来的整个数组往后移动一格的，时间复杂度是 O(n)，往末尾加则不需要。

const back = (graphs: Graph[], movedGraphSet: Set<Graph>) => {
  const newGraphs: Graph[] = [];
  const tailGraphs: Graph[] = [];
  for (let i = graphs.length - 1; i >= 0; i--) {
    const graph = graphs[i];
    if (movedGraphSet.has(graph)) {
      tailGraphs.push(graph);
    } else {
      newGraphs.push(graph);
    }
  }
  newGraphs.push(...tailGraphs);
  return newGraphs.reverse(); // 反向
};

Forward 上移一层

将存在于 movedGraphSet 的图形都往后移动一个位置。需要注意多个需要移动的图形如果紧邻，是要将它们作为一个整体放到它们之后的第一个不移动图形的后面的。

比如被操作数组为 [0, 1, 2, 3, 4, 5, 6, 7]，指定数组元素为 [1, 2, 6]，返回 [0, 3, 1, 2, 4, 5, 7, 6]。

一开始我想的从左往右遍历，用多个指针记录连续需要移动的图形的，然后发现实现上也太复杂了吧。要维护指针，还要判断指针什么时候应该移动什么的。

后面我换了个思路，改为从右往左遍历。如果当前元素是需搬移元素，就和下一个元素交换。

这样，一个不用搬移的元素就能往前挤过被搬运元素的集群。

const forward = (graphs: Graph[], movedGraphs: Set<Graph>) => {
  const newGraphs = [...graphs];
  for (let i = newGraphs.length - 2; i >= 0; i--) {
    if (movedGraphs.has(newGraphs[i])) {
      // 交换
      [newGraphs[i], newGraphs[i + 1]] = [newGraphs[i + 1], newGraphs[i]];
    }
  }
  return newGraphs;
};

Backward 下移一层

同理。

换个方向。

const backward = (graphs: Graph[], movedGraphs: Set<Graph>) => {
  const newGraphs = [...graphs];
  for (let i = 1; i < newGraphs.length; i++) {
    if (movedGraphs.has(newGraphs[i])) {
      [newGraphs[i], newGraphs[i - 1]] = [newGraphs[i - 1], newGraphs[i]];
    }
  }
  return newGraphs;
};
图形功能的spanstylecolor开发前端图形编辑器排列移动功能

有关图形编辑器：排列移动功能的实现的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  3. ruby - 如何进行排列以有效地定制输出 - 2

    这是一道面试题，我没有答对，但还是很好奇怎么解。你有N个人的大家庭，分别是1,2,3,...,N岁。你想给你的大家庭拍张照片。所有的家庭成员都排成一排。“我是家里的friend，建议家庭成员安排如下:”1岁的家庭成员坐在这一排的最左边。每两个坐在一起的家庭成员的年龄相差不得超过2岁。输入:整数N，1≤N≤55。输出:摄影师可以拍摄的照片数量。示例->输入:4，输出:4符合条件的数组:[1,2,3,4][1,2,4,3][1,3,2,4][1,3,4,2]另一个例子:输入:5输出:6符合条件的数组:[1,2,3,4,5][1,2,3,5,4][1,2,4,3,5][1,2,4,5,3][

  4. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  5. ruby - 按值降序排列散列，然后按升序键入 ruby - 2

    我有这样的哈希trial_hash={"key1"=>1000,"key2"=>34,"key3"=>500,"key4"=>500,"key5"=>500,"key6"=>500}我按值降序排列:my_hash=trial_hash.sort_by{|k,v|v}.reverse我现在是这样理解的:[["key1",1000],["key4",500],["key5",500],["key6",500],["key3",500],["key2",34]]但我希望当值相同时按键的升序排序。我该怎么做？例如:上面的散列将以这种方式排序:[["key1",1000],["key3",500

  6. ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2

    当我在我的Rails应用程序根目录中运行rakedoc:app时，API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名，以便它在GitHub上正确呈现。更好的是，我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作？是否有某个地方可以查找可以修改的主页文件的名称？还是我必须编写一个新的Rake任务？额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么？为什么不只有一个？

  7. ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能？ - 2

    只是想确保我理解了事情。据我目前收集到的信息，Cucumber只是一个“包装器”，或者是一种通过将事物分类为功能和步骤来组织测试的好方法，其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗？ 最佳答案 有点。它是一种组织测试的方式，但不仅如此。它的行为就像最初的Rails集成测试一样，但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意，您可以使用步骤来构建对象和设置状态，但通常您

  8. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  9. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  10. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

随机推荐