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

大家好,我是前端西瓜哥。这次来实现一下图形编辑器排列(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;
};

结尾

我是前端西瓜哥,欢迎关注我,学习更多前端图形知识。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/7220.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式学深度学习:1、Pytorch框架搭建

嵌入式学深度学习&#xff1a;1、Pytorch框架搭建1、介绍2、Pytorch开发环境搭建2.1、查看GPU是否支持CUDA2.2、安装Miniconda2.3、使用Conda安装pytorch2.4、安装常用库3、简单使用验证1、介绍 深度学习是机器学习的一种&#xff0c;如下图&#xff1a; 目前深度学习应用场景…

MySQL-四大类日志

目录 &#x1f341;MySQL日志分为4大类 &#x1f341;错误日志 &#x1f343;修改系统配置 &#x1f341;二进制日志 &#x1f343;查看二进制日志 &#x1f343;删除二进制日志 &#x1f343;暂时停止二进制日志的功能 &#x1f341;事务日志(或称redo日志) &#x1f341;慢查…

chatgpt3中文辅助写作-gpt2中文文本生成

GPT-3是一种深度学习模型&#xff0c;具有潜在的巨大计算成本和训练麻烦。根据OpenAI公司的官方消息&#xff0c;训练GPT-3是一项昂贵的和耗时的过程&#xff0c;在OpenAI公司&#xff0c;训练GPT-3的成本已经超过了10亿美元。考虑到GPT-3的架构、规模和训练时间&#xff0c;这…

高分子PEG磷酸盐mPEG-phosphoric acid,Phosphate PEG,甲氧基聚乙二醇磷酸,可用于修饰金属氧化物表面

规格单位&#xff1a;g |货期&#xff1a;按照具体的库存进行提供 | 端基取代率&#xff1a;95% 中英文名&#xff1a;mPEG-phosphoric acid|Phosphate PEG|甲氧基聚乙二醇磷酸​ 一、Phosphate PEG化学结构式&#xff1a; 二、产品详情&#xff1a; 外观&#xff1a;灰白…

[oeasy]python0123_中文字符_文字编码_gb2312_激光照排技术_王选

中文编码GB2312 回忆上次内容 上次回顾了 日韩各有 编码格式 日本 有假名 五十音一字节 可以勉强放下 有日本汉字 字符数量超过20000 韩国 有谚文 数量超过500一个字节 放不下 有朝鲜汉字 字符数量超过20000 作为 汉字源头的中国 究竟应该 如何对汉字 进行编码 呢&#x…

操作系统-AOSOA

一、个人感受 1.1 权衡 在我写这份报告的时候&#xff0c;已经是 6 月 30 号了&#xff0c;经历了一个学期的“折磨”&#xff0c;我面对终点&#xff0c;已经没啥感觉了&#xff0c;就想着赶快呼噜完了就完事了。其实做这个项目最大的体会就是“人力有穷&#xff0c;一切皆权…

视频剪辑:教你如何调整视频画面的大小。

大家应该都会调整图片的大小吧&#xff0c;那你们会调整视频画面的大小吗&#xff1f;我想&#xff0c;应该会有人不还不知道要调整的吧&#xff0c;今天就让小编来教大家一个方法怎样去调整视频画面的大小尺寸。 首先&#xff0c;我们要有以下材料&#xff1a; 一台电脑 【…

列的类型定义——整形类型

文章目录 前言一、整数类型的附带属性 类型名称后面的小括号unsignedauto_increment总结前言 1&#xff09;采用26字母和0-9的自然数加上下互相 ‘_’ 组成&#xff0c;命名简洁明确&#xff0c;多个单词用下划线 ‘_’ 隔开 2&#xff09;全部小写命名&#xff0c;尽量避免…

【SpringBoot】自定义Starter

&#x1f6a9;本文已收录至专栏&#xff1a;Spring家族学习之旅 &#x1f44d;希望您能有所收获 一.概述 在使用SpringBoot进行开发的时候&#xff0c;我们发现使用很多技术都是直接导入对应的starter&#xff0c;然后就实现了springboot整合对应技术&#xff0c;再加上一些简…

【论文导读】Inferring deterministic causal relations

前段时间看Scholkopf教授的《Towards Causal Representation Learning》&#xff0c;看到这篇挺有意思来读读。 这一篇只在Arxiv上挂着&#xff0c;重点主要是研究发掘两变量之间的因果关系&#xff08;无法应用独立性检验等方法&#xff09;&#xff0c;引入了信息论中的正则…

Elasticsearch:配置选项

Elasticsearch 带有大量的设置和配置&#xff0c;甚至可能让专家工程师感到困惑。 尽管它使用约定优于配置范例并且大部分时间使用默认值&#xff0c;但在将应用程序投入生产之前自定义配置是必不可少的。 在这里&#xff0c;我们将介绍属于不同类别的一些属性&#xff0c;并讨…

2023年泰迪杯数据挖掘挑战赛B题--产品订单数据分析与需求预测(2.数据探索性分析)

前言 继续上一片数据预处理进行续写&#xff0c;利用预处理之后的数据进行数据分析并且解决问题一相关的问题。问题一主要目的是让研究各种因素对于需求量的影响&#xff0c;然后找到确定影响需求量的主要因素并且进行数据分析和主要特征抽取。 对于问题提出的八个小问&#…

解决云服务器ssh经常断开的问题

问题描述&#xff1a;无论是腾讯云服务器还是阿里云服务器等&#xff0c;在使用MobaXterm或者Xshell连接云服务器时&#xff0c;如果十分钟左右无任何操作&#xff0c;ssh就会自动断开&#xff0c;非常烦人&#xff0c;下面提供几种方法来解决该问题。 MobaXterm的报错如下&am…

Cookie和Session的工作流程及区别(附代码案例)

目录 一、 HTTP协议 1.1 为什么HTTP协议是无状态的&#xff1f; 1.2 在HTTP协议中流式传输和分块传输编码的区别 二、Cookie和Session 2.1 Cookie 2.2 Session 2.3 Cookie和Session的区别 三、servlet中与Cookie和Session相关的API 3.1 HttpServletRequest 类中的相关方…

mysql与redis区别

一、.redis和mysql的区别总结 &#xff08;1&#xff09;类型上 从类型上来说&#xff0c;mysql是关系型数据库&#xff0c;redis是缓存数据库 &#xff08;2&#xff09;作用上 mysql用于持久化的存储数据到硬盘&#xff0c;功能强大&#xff0c;但是速度较慢 redis用于存储使…

【新2023Q2押题JAVA】华为OD机试 - 挑选字符串

最近更新的博客 华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为od机试,独家整理 已参加机试人员的实战技巧本篇题解:挑选字符串 题目 给定a-z,…

二.microchip samE54-- ATSAME54P20A 开发板使用总结

板子图片 2.1 板子硬件资源 2.1.1 外部插件1 2.2.2 外部插件2 2.2.3 外部插件3 2.2.IDE KIT连接&#xff08;USB DEBUG&#xff09; 板子自带&#xff0c;不是JLINK 出现这个说明板载 调试软件识别成功 2.3 编译与下载 D:\HarmonyProjects\usart\usart_echo_blocking\f…

DataHub调研数据血缘

DataHub调研&数据血缘 1. DataHub? 阿里的数据工具datahub? 回答&#xff1a; 不是 DataHub是由Linkedin开源的&#xff0c;官方喊出的口号为&#xff1a;The Metadata Platform for the Modern Data Stack - 为现代数据栈而生的元数据平台。官方网站A Metadata Platfo…

Qt C++与Python混合编程:补充错误

在提示中&#xff0c;需要引用Python.h&#xff0c;出现错误。 1、找不到Python.h 如果是pro工程&#xff0c;需要在里面配置&#xff1b; INCLUDEPATH /Users/xinnianwang/opt/anaconda3/include LIBS /Users/xinnianwang/opt/anaconda3/lib 如果是CMakeLists.txt需要配…

【清明节】开发平台公司流辰信息缅怀先祖,传承精神,撸起袖子创佳绩!

四月暖春&#xff0c;草长莺飞&#xff0c;杨柳依依&#xff0c;大自然呈现出一片生机勃勃的朝气景象。中国传统民俗节日——清明节踏春而来&#xff0c;在回乡祭祖&#xff0c;缅怀先人的季节里&#xff0c;哀思、怀念、伤感已经成为整个清明节的主基调。在这万物复苏、春和景…
最新文章