文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

低代码海报平台的编辑器难点剖析

大致操作流程就是拖动左侧的组件到中间的画布，选中组件，右侧属性面板就会展示与该组件关联的属性。编辑右侧属性，画布中对应的组件样式就会同步更新。页面拼接完成。...） 我们将上面的操作流程拆解为三步： 1⃣️ 拖动左侧的组件到中间的画布 2⃣️ 选中组件，右侧属性面板就会展示与该组件关联的属性 3⃣️ 编辑右侧属性，画布中对应的组件样式就会同步更新 1添加组件到画布...2选中组件展示其关联属性 当在画布中选中具体组件时，我们需要知道此刻是哪个组件被选中了，意味着需要一个变量来存储当前高亮的组件。...3编辑属性，画布同步更新 上面只是初步建立了属性和组件的对应关系，组件初始值的展示、复杂组件的展示以及表单值更新后，画布如何同步更新，这些问题我们还都没有解决。...4画布区域交互设计实现 上面说了这么多，基本都是围绕左侧组件区域、中间画布区域、右侧属性区域相互之间的数据流动来讲的。最后来说一下画布区域本身一些比较复杂的交互实现。

1.2K20

如何用Scratch 3绘制矢量图形 【Gaming】

我将通过解释如何绘制苹果来演示在Scratch中绘制矢量精灵的所有要点，但是您可以将此方法应用于任何要创建的对象。...要打开Scratch的矢量绘图应用程序，请单击蓝色Scratch Cat图标，然后选择画笔图标。这将创建一个新的精灵画布。...警告：如果单击绘图屏幕底部的“转换为位图”按钮，则插图将变成像素化位图图像，并且无法将其还原为矢量。 画苹果形状 1. 选择一个空的精灵画布，然后选择圆形工具。通过单击空画布并拖动鼠标创建一个圆。...单击并拖动两个边节点以选择它们。节点被选中时变为蓝色。 图片11.png 选择节点后，按键盘上的向上箭头将节点移向圆的顶部。 图片12.png 5....要将茎移到苹果后面，请单击画布上方的“后退”按钮。 图片14.png 添加突出显示形状 1. 选择线条工具。在苹果形状上画一个三角形，把每一条新线和前一条线的末端连接起来。

5.5K00
您找到你想要的搜索结果了吗？
是的
没有找到

ps快捷键

Ctrl + “0”，可以满画布显示图像。 在英文输入的状态下，点击F键两次，Tab 键一次，可以满屏显示。 F键一次，Tab键一次，可以还原。 Ctrl + V 可以关闭当前图像。...如何新建文件夹： 1）文件菜单下有一个新建，快捷键是 Ctrl + N 。 2）按住Ctrl 键在编辑区空白处双击鼠标左键。 图像大小：是指存盘时占用磁盘空间的大小。 宽高常用的像素是厘米。...如何重命名图层： l 在图层名称上双击左键，输入，点击回车即可。 l 图层面板上的眼睛图标，点击可以隐藏或显示图层的内容。 l 有蓝色条和笔尖形状属于当前图层。...l 操作时只能在当前图层进行操作。 如何复制图层： l 工具箱中的第二个工具移动工具，按Alt ，在图标上点击拖动。 l 点击图层拖动到新建按钮上。 l 在图层上单击鼠标右键，选择复制图层。...磁性套索工具：它用点击拖动的方法，对图像进行选取，它以一种智能的方法，自动搜索图像边较清晰。 宽度：指搜寻边缘像素的宽度。 边对比度：指搜寻时灵敏度，百分比值越高就越灵敏。

3.9K50

Vcl控件详解_c++控件

如果为True，是字会变成蓝色 Images：为每个页标签添加一个图片 MultiLine：如果总页标签的长度大于该控件的宽度时，是否允许多行显示 MultiSelect：是否允许多选页标签...，判断是否列出下拉框　 Format：设置显示模式。...：当焦点离开该控件时选中的是否有视觉效果 HotTrack:为True时鼠标经过列表上时，以高亮显示 Images：为节点添加一个图片 Indent：可确定发型了节点时相对于其展开的父节点的像素缩进量...GridLines：当ViewStyle为vsReport时，是否显示网格 HideSelection：当焦点离开该控件时选中的是否有视觉效果 HotTrack：为True时，鼠标经过列表项上时高亮显示...当项目移动时触发，该事件在OnSectionDrag事件之后 TStatusBar 属性 AutoHint：是否自动显示在它所在的父控件上的所有控件的Hint Canvas：只读，访问它的画布

4.8K10

Swift - Button,Label

前面带“+”图标按钮，默认文字颜色为蓝色，有触摸时的高亮效果 UIButtonType.DetailDisclosure：前面带“!”...图标按钮，默认文字颜色为蓝色，有触摸时的高亮效果 UIButtonType.System：前面不带图标，默认文字颜色为蓝色，有触摸时的高亮效果 UIButtonType.Custom：定制按钮，前面不带图标...，默认文字颜色为白色，无触摸时的高亮效果 UIButtonType.InfoDark：为感叹号“!”...：触摸在控件内拖动时 TouchDragOutside：触摸在控件外拖动时 TouchDragEnter：触摸从控件之外拖动到内部时 TouchDragExit：触摸从控件内部拖动到外部时 TouchUpInside...label.numberOfLines=2 //显示两行文字 //设置文本高亮 // label.isHighlighted = true //设置文本高亮颜色

1.7K20

「Adobe国际认证」Adobe Photoshop，如何裁剪并拉直照片？

原标题：「Adobe国际认证」Adobe Photoshop如何裁剪并拉直照片 裁剪是移去部分照片以打造焦点或加强构图效果的过程。在 Photoshop 中使用裁剪工具裁剪并拉直照片。...2.绘制新的裁剪区域，或拖动角和边缘手柄，以指定照片中的裁剪边界。 3.（可选）使用控制栏指定裁剪选项。 大小和比例选择裁剪框的比例或大小。...画布会自动调整大小以容纳旋转的像素。 要拉直照片，请执行以下操作之一： 将指针放置在角句柄靠外一点的位置，然后拖动以旋转图像。裁剪框内会显示网格，并且图像会在其后面旋转。...使用裁剪工具调整画布大小 您可以使用裁剪工具调整图像画布的大小。 在工具栏中，选择裁剪工具 。裁剪边界显示在图像的边缘上。 向外拖动裁剪句柄以放大画布。使用 Alt/选项修改键从各个方向进行放大。...1.选取“图像”>“画布大小”。 2.执行下列操作之一： 在“宽度”和“高度”框中输入画布的尺寸。从“宽度”和“高度”框旁边的弹出菜单中选择所需的测量单位。

2.8K10

htm5新特性

Canvas元素，用来展示图形，该元素本身没有行为，仅提供一块画布。 embed元素，用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。 mark元素，用来展示高亮的文字。...search元素，用于搜索引擎，比如在站点顶部显示的搜索框。 range元素，特定值范围内的数值选择器，典型的显示方式是滑动条。 number元素，只包含数值的字段。...drap：被拖动元素或从文件系统选中的文件，拖放落下时触发。 dragend：网页元素拖动结束时触发。...;}); dataTransfer对象的属性有：· dropEffect：拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。...setDragImage(imgElement, x, y)：指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。

1.8K20

Excel小技巧20：使用鼠标编辑公式

excelperfect 有一种有趣的编辑公式的方法，那就是使用鼠标拖动公式参数单元格区域，如下图1所示。 ? 图1 1.选择想要编辑的公式所在的单元格。...2.按F2键，此时可以看到单元格中的公式以及带有蓝色边框的公式使用的单元格。 3.将鼠标移到蓝色边框单击并拖动到另一区域或者调整大小。 4.完成拖动后，按回车键确认，即完成公式的编辑。 很简单！...同样，也可以通过拖动鼠标来更改图表数据系列，如下图2所示。 ? 图2 1.选取图表数据系列。此时，该数据系列对应的数据单元格高亮显示。...2.在高亮区域单击鼠标并拖动到另一数据区域，图表将发生相应的变化。 在Excel中，拖动鼠标操作很有趣，空闲时试一试，说不定还能发现不少有趣的操作来！...而有时候，这些小小的操作往往能够收获很好的效果，特别是经常要做的这项操作有很多步骤而拖动鼠标却可轻松完成时。 多试试！

53310

快看，动图合集展示Excel的实用技巧！

方法：选中该列中带有绿色小三角的任意单元格，鼠标向下拖动，然后点击该列的右侧，记住一定要右侧，选择“转换为数字”即可。...在使用VLOOKUP函数时，若是数字带有绿色小三角容易出现“#N/A”的现象，所以使用函数前最好均“转换为数字”。 7. 分段显示手机号码 ?...自动标出不及格分数 假定需用红色字体显示60以下分数，蓝色字体显示60以上分数。 按Ctrl+1，设置单元格格式→自定义，类型输入框中输入： [蓝色][>=60];[红色][<60] ? 12....星号“*”如何查找 “*”是通配符，如果需要查找“*”本身如何查找呢？ 按下Ctrl＋F键，在查找内容对话框中输入“~*”，即星号前加上“~”（Tab键上面那个）。 ? 14....用F4锁定单元格 在Excel里根据函数填充数据的时候，有时候你希望你引用的单元格下拉时随之变化，也有时候你并不这么想。 当你要“绝对引用”——也就是锁定单元格的时候，你必须在行列前加$符号。

1.5K11

低代码设计器的自由布局拖动的实现原理

如何使元素支持拖动 实现组件的自由拖动的核心就是 html5 中新添加的全局属性 draggable 属性，该属性规定了元素是否可进行拖动。..., props: {} } ], list2: [], }; } } 复制代码 下面我们来分析一下如何实现将组件列表中的组件拖动到画布中...设置组件离开目标元素时放置行为为不能拖放，即none。 拖动元素在目标元素松手时添加元素到画布，即将组件元数据添加到list2中，元素所对应的元数据记录也了这个组件在画面中的坐标位置。...那拖动到画布中的组件又是如何实现通过拖动灵活的移动位置的呢？...同样，我们可以将画布中的组件添加mousedown事件，在事件中我们添加mousemove事件的监听，当画布中的组件进行移动时，我们实时的将该被移动元素所对应的元数据坐标进行更新。下面是代码的实现。

3.9K30

GIMP 教程：如何使用 GIMP 裁剪图像 | Linux 中国

你可能想在 GIMP 中裁剪图像的原因有很多。例如，你可能希望删除无用的边框或信息来改善图像，或者你可能希望最终图像的焦点是在一个特定细节上。...在本教程中，我将演示如何在 GIMP 中快速裁剪图像而又不影响精度。让我们一起来看看吧。 如何在 GIMP 中裁剪图像 方法 1 裁剪只是一种将图像修整成比原始图像更小区域的操作。...激活该工具后，你会注意到画布上的鼠标光标会发生变化，以表示正在使用“裁剪工具”。 现在，你可以在图像画布上的任意位置单击鼠标左键，并将鼠标拖到某个位置以创建裁剪边界。...image.png 此时，将鼠标光标悬停在所选内容的四个角上会更改鼠标光标并高亮显示该区域。现在，你可以微调裁剪的选区。你可以单击并拖动任何边或角来移动部分选区。...然后，你可以使用与“裁剪工具”相同的方式高亮选区，并调整选区。选择好后，可以通过以下方式裁剪图像来适应选区：“ 图像 → 裁剪为选区(Image → Crop to Selection)”。

4.2K30

拖拽牛逼，轻松实现一个自由拖拽的组件

如何使元素支持拖动 实现组件的自由拖动的核心就是 html5 中新添加的全局属性 draggable 属性，该属性规定了元素是否可进行拖动。..., props: {} } ], list2: [], }; } } 复制代码 下面我们来分析一下如何实现将组件列表中的组件拖动到画布中...设置组件离开目标元素时放置行为为不能拖放，即none。 拖动元素在目标元素松手时添加元素到画布，即将组件元数据添加到list2中，元素所对应的元数据记录也了这个组件在画面中的坐标位置。...那拖动到画布中的组件又是如何实现通过拖动灵活的移动位置的呢？...同样，我们可以将画布中的组件添加mousedown事件，在事件中我们添加mousemove事件的监听，当画布中的组件进行移动时，我们实时的将该被移动元素所对应的元数据坐标进行更新。下面是代码的实现。

1.7K30

使用Vue + fabric.js构建标注工具的细节

：监听画布的鼠标按下mouse:down事件，并保存鼠标按下时的坐标，作为标注框的起点(mouseFrom)；监听画布的鼠标移动mouse:move事件，在鼠标移动过程中，在canvas上绘制以第一步中的起点为左上角...，鼠标移动时的坐标为右下角(mouseTo)的矩形（rect)；监听画布的鼠标抬起mouse:up事件，鼠标抬起时，标注框绘制完毕；由此得知，在第二步中的标注框的生成代码为rect = new fabric.Rect...，但是，当鼠标移出画布时，mouseFrom和mouseTo的值仍在变化，但是溢出画布的标注框却不能正常显示，因此在绘制时，需要限制mouseFrom和mouseTo的值,使得标注框的起点和终点均保持在画布内部...，我遇到过这样一个bug,起初在外接显示器上，选中标注框正常，但无意间拖动到自己电脑屏幕上时，诡异的一幕发生了，选中的框跟原本的标注框不对应，再拖回到外接显示器上，又显示正常了选中状态下选中选中框的八个控制点没有很好的附着在选中框上看到这个问题...4.选中状态下调整框的等比例缩放问题开发完之后，产品提出这样一个bug,调整标注框拖动上下左右四个角只能等比例缩放，产品期望能随着鼠标自由地缩放，浏览一遍文档，没有找到对应的设置，那就只能再去源码里面找了

2.9K81

Sketch 94 mac，草图94中文最新版支持M1，支持macOS Ventura 13

首先，您现在可以通过沿选择框边缘的任意点拖动来水平或垂直调整大小。其次，如果选择太小而无法舒适地调整大小，则选择框会显得稍大，以便更容易拖动其边缘。...有什么改进：将形状转换为轮廓时，我们将尊重任何非边框元素，例如填充或阴影。您现在可以通过按住⌘并拖动调整大小手柄来旋转线条，就像您可以使用其他图层一样。您现在可以直接在画布上编辑符号中的文本层。...这意味着我们还将复制它的覆盖，使事情变得更快——无需分离或前往源符号。如果您在颜色弹出框中键入新的颜色值，则现在在您单击其他位置以关闭弹出框时应用这些值。我们更新了选择框的设计。...修复了在选择色调或调整颜色变量时可能发生的崩溃。修复了将形状转换为轮廓有时会在画布上稍微移动它或移除其旋转或翻转的错误。当您悬停或拖动线层的调整大小手柄时，您现在将看到一个工具提示及其长度。...修复了使用选定的画板将图像拖放到画布上会忽略您放置它的位置的问题。修复了如果叠加层是自动链接目标，则叠加层预览无法正确显示的问题。修复了一个错误，如果交互在文本层上，您将无法在画布周围移动叠加层。

11K70

Android实现通话最小化悬浮框效果

，这里他们只能允许一个视频画布存在，这里看情况要不要移除），于此同时，延时个几百毫秒，开启悬浮框，新建一个新的视频画布然后动态添加到悬浮框里面去，监听悬浮框的触摸事件，让悬浮框可以拖拽移动；监听悬浮框的点击事件...1.Activity是如何实现最小化的？...为悬浮框建立一个布局文件alert_float_video_layout，这里根据需求去写，如果只是像我上面gif那样，只需要悬浮框显示对方的视频画布，那么布局文件可以如下所示：（其中悬浮框大小我这里固定为长...这里的初始化主要包括对：悬浮框的基本参数（位置，宽高等），悬浮框的点击事件以及悬浮框的触摸事件（即可拖动范围）等的设置，代码注释已经很清楚，直接看代码，如下所示： public class FloatVideoWindowService...，设置悬浮框可拖动 smallSizePreviewLayout.setOnTouchListener(new FloatingListener()); } //开始触控的坐标，移动时的坐标（相对于屏幕左上角的坐标

2.5K50

PS基础操作及常用快捷键

，鼠标移动到选框范围内，按住左键拖动 精确选框绘制：在属性栏中——样式“固定大小”，输入具体尺寸，在画布中单击鼠标 固定比例：可以让选框始终按照一个比例进行绘制 案例1：把下图设置成望远镜的视角...首先新建图层，在填充前景色为黑色，再用选图工具 注意：画好一个圆形图形时，del掉，再鼠标直接拖动蚂蚁线的同时按住shift键移动，这样两个圆形就会处在同一水平线上。 ?...自由变化 ctrl+T 不同图层有不同的操作，shift+鼠标点击图层，选中后可以操作所有图层 可以对图像进行放大缩小，旋转 放大缩小：鼠标移动到定界框的顶点上时，按住鼠标拖拽（shift等比缩放，alt...常用快捷键 快捷键 功能 Ctrl+N 新建画布 Ctrl+shift+alt+n 新建图层 Ctrl+alt+z 撤销（操作错了返回上一步） Alt+鼠标滚轮滚动 放大/缩小画布的显示效果 在画布显示比工作区大时...，按空格“space”，拖动鼠标左键 平移画布 Ctrl+E 合并图层 Ctrl+G 图层分组 Ctrl+R 显示/隐藏标尺 Shift+F6 选区羽化

1.8K10

【iOS 开发】基本 UI 控件详解 (UIButton | UITextField | UITextView | UISwitch)

; -- 高亮 : UI 控件突出显示, 处于高亮状态; 手放在按钮上处于高亮状态; -- 禁用 : UI 控件关闭后, 处于禁用状态; 禁用状态的控件不可操作, 禁用操作在 Interface Builder...: 用户碰触时的高亮状态; -- Selected : 被选中时的状态; -- Disabled : 禁用状态; 为不同状态的 UIButton 设置样式 :  -- "setTittle : forState...UITextField 属性 (1) PlaceHolder 属性 PlaceHolder 属性 : 属性值是一个字符串, 再文本框没有输入内容时, 文本框内显示的灰色文本, 用于作为文本框提示信息...UIScrollView 属性简介 (1) UIScrollView 简介 UIScrollView 简介 :  -- 显示内容多 : 可滚动控件, 可以使用手指拖动控件中的内容, 在其中可以显示多个屏幕的内容...4) Bounce 属性 Bounce 属性 :  -- Bounces : 选中后, 该 UITextView 控件有弹性, 拖动控件内容有弹回效果, 没有勾选时拖到边界僵硬的停止; -- Bounce

6.5K20

AfterEffect 从零开始 篇一 : 了解软件界面，掌握基础操作

5、6是我们在AE中最主要的操作区域。 蓝色的竖线指的是当前选中的时间，顶部的两段浅灰色长条是可操作的。点击边缘蓝色区域即可以拖动它的长度。...AE中的基础名词释义 合成： 合成最简易的理解就是“画板”。 在AE中,新建项目不等于新建画板，就像sketch一样，新建了项目后还需要添加画布才行。...基础运动操作 1.我们新建合成后，首先在项目栏中添加素材，或者是直接使用功能栏中的图形工具绘制图形。 2.绘制图形后，在图层栏选择运动项目的下箭头（白色框），就可以展开你的图层选项了。...2.运动的速度取决于你的运动时间。拖动关键帧的位置可以调整运动速度。 3.每种运动要素的关键帧互相独立，如果不动的话要看是不是k错位置了。...下一期会分享如何调整运动曲线，让运动更佳流畅自然。

2.3K00

精读《磁贴布局 - 性能优化》

一般会遍历画布所有的组件，根据当前组件位置与目标组件位置的相对位置判断是否产生碰撞，所以仅判断单个组件碰撞时，时间复杂度是 O(n)。...再类比到人判断碰撞的视角，当画布有 1000 个组件时，我们也能一眼看出来某个组件与哪些组件相交，但这个判断来自于肉眼在可视区域一扫而过，而不是把 1000 个组件全部看一遍。...比如下面的例子： 蓝色框为鼠标拖动组件时，鼠标的实时位置，而红色背景正方形表示 落点位置，红色正方形下方的组件属于 落点后组件，这些组件因为红色正方形的位置插入，需要重新计算位置。...但一般情况磁贴布局高度远大于宽度，所以可能往较坏的 O(n) 复杂度发展，但不论如何，这个线性性能是可接受的。...总结 经过优化，磁贴布局在拖拽前、中、后各个阶段的计算复杂度均为 O(n)，即一个拥有 500 个组件实例的复杂画布，也只要在每次拖动时循环 500 次计算位置，而配合空间换时间的一些 Map 映射关系配合

76730
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券