数学4个象限图

拖拽框选是现代应用程序中经常使用的功能之一，比如原型制作时常见的实际应用：

• 图片框选：拖拽框选可以用于网页中的图片操作，用户可以通过鼠标拖动实现对图片的裁剪或者放大。
• 表格选择：当需要对中继器中的表格进行操作时，通过拖拽框选可以快速地选择多行或多列，甚至进行一定程度的计算。
• 画板应用：拖拽框选可以用于在线画板应用，用户可以通过鼠标拖动绘制出一个矩形。
• 地图选择：在网页中的地图应用中，用户可以使用拖拽框选来选择一个区域，以查看该区域的详细信息或执行其他操作。

总之，拖拽框选在网页设计和开发中非常实用，在各种应用场景中都有着广泛的应用。它可以提高用户体验、方便用户的操作、简化操作流程，同时也可以增强原型的交互性和可用性，是实现各种应用程序的重要功能之一。

一、演示

先来看下演示吧，地址：鼠标拖拽框选效果

二、分析

在电脑上，拖拽选取操作是通过鼠标来捕捉用户的手势，在拖拽操作中，用户首先点击并按住鼠标左键，然后移动鼠标，直到所需选取的区域被框选完成，最后松开鼠标左键或手指即可完成选取操作。

那么这个矩形区域应该是由用户开始点击的点和结束拖拽的点所构成的矩形，这样我们就知道了，这个矩形的宽度应该为鼠标横向移动距离，高度应该为纵向移动距离。

但是用户不可能总是从左上向右下选取，那么我们需要分别分析，虽然页面里纵坐标向下为正，但我们用数学上的象限进行分类：

• 先分析上图，当框选矩形位于第四象限时，矩形的左上角就起始点(x:0, y:0)。
• 当矩形位于第一象限时，矩形的左上角应该向上移一个矩形的高度(x:0, y:-height)。
• 当矩形位于第三象限时，矩形应该向左移一个矩形的宽度(x:-width, y:0)。
• 最麻烦是当矩形位于第二象限时，应该同时向上移一个矩形的高度，并且向左移一个矩形的宽度(x:-width, y:-height)。

三、教程

思路已经理清楚，我们可以动手做原型了。

先建两个全局变量，叫dragStartX和dragStartY，用来记录鼠标按下时的坐标。

放一个显示用的矩形，宽度高度必须大于2×2，边框的颜色重一些，填充的颜色浅一些，并且透明度50%，依个人喜好配置就行，默认调色板的第2行和第4行就挺好。配置好后将矩形设为隐藏。

建两个交互，一个是“旋转时”可以在鼠标按下时进行一些初始化设置。

一个是“尺寸改变时”用来自动更新矩形的左上角的坐标，前面分析过了，可以用四个If/Else分别判断四个象限。

会用Axure函数的这里也可以用Math.min进行优化，注：下图功能同上图，选其一即可。

在矩形上点右键“转换为动态面板”，先建一个“加载时”交互，让动态面板的宽度更改为[[Window.Width]]高度更改为[[Window. Height]]。这样可操作的区域就比较大了。

建一个“拖动开始时”交互，去触发矩形的“旋转时”。

再建一个“拖动时”交互，实时更改矩形的尺寸为[[Math.abs(TotalDragX)]]和[[Math.abs(TotalDragY)]]， 因为我们已经设置过矩形的“尺寸改变时”所以这里就无需考虑它的移动了，最后建一个“拖动结束时”交互，这里可以根据自身需要让矩形保留或隐藏（测试看效果时推荐保留显示）。

好了，一个可以任意方向托拽的框选功能就做好了。看看效果：

最后

有进一步兴趣的还可以再加入其他的交互功能，比如“按住Shift键”进行增选功能等。会元件“接触”判断的朋友，就可以实现中继器的多选、数据统计等操作。

本文由 @最InのAxure 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

汪钢悦4633数学上的四个象限怎么分就是那个什么 -
仰科届18123623830 ______ 坐标(+.+)第一象限 (-.+)第二象限 (-.-)第三象限 (+.-)第四象限

汪钢悦4633平面直角坐标系右下方为第几象限?
仰科届18123623830 ______ 第四象限平面直角坐标系右下方的称为第四象限.平面直角坐标系里的横轴和纵轴所划分的四个区域,分为四个象限.右上的称为第一象限,左上的称为第二象限,左下的...

汪钢悦4633什么是象限(初二数学)
仰科届18123623830 ______ 平面直角坐标系里的横轴和纵轴所划分的四个区域,分为四个象限. 以原点为中心,X,Y轴为分界线. 右上的称为第一象限,左上的称为第二象限,左下的称为第三象限,右下的称为第四象限. 在坐标轴上的点特别是原点不属于任何象限..

汪钢悦4633坐标第一象限在哪个地方 -
仰科届18123623830 ______ 第一象限在右上角,如图所示: 【象限】: 又称象限角.在应用数学里,平面直角坐标系里的横轴和纵轴所划分的四个区域,分为四个象限.象限以原点为中心,x,y轴为分界线.右上的称为第一象限,左上的称为第二象限,左下的称为第三象限,右下的称为第四象限.坐标轴上的点不属于任何象限.

汪钢悦4633数学象限 十 看←的十,哪个是一二三四象限 正数的是一三还是负数的是一三? -
仰科届18123623830 ______ 2 1 3 4 上面分别为1234四个象限,那么画个坐标轴,很明显,标出1234中间的点为原点!就是零点(0,0)!!.向上为Y正,向右为X正,那么正负象限很明显就从坐标XY就分出. 1中XY都正,故正 3XY都负,如果是*得关系,那么也正 24都为一正一负,相*的话为负 要看运算法则的关系 ,这里你只要弄明白对应的关系,做题很轻松. 对了1234象限就是正规的象限分法,花个图一清二楚 谢谢采纳~亲

汪钢悦4633[初中数学】什么是两平行,三对称,四象限 -
仰科届18123623830 ______[答案] 两平行是两条直线平行 三对称是轴对称 中心对称 还有一个我实在想不出来 四象限是平面直角坐标系中的4个象限

汪钢悦4633怎么利用Excel绘制四象限图 -
仰科届18123623830 ______ 1、Excel绘制四象限图的作法仅选择数据项,如下图中标绿色的部分,并插入散点图,系统自动生成图2的图表. 2、分别设置X-Y坐标轴格式,将X坐标轴交叉位置设置为20,标签选择:低,将Y轴交叉位置设置为30,标签选择:低通过以上设置,X-Y坐标标答均位于最下边和最左边,X-Y2轴相互交叉,组成一个四象限图. 3、接下来可以试着将其中的一些数据改为负值,看图表有什么变化.如下图:标红色的部分是更改为负值的数据,和此时对应生成的图表样式.为了正确显示,此时可以再将此值更改为默认值即可.

汪钢悦4633四象限分析图怎么制作 -
仰科届18123623830 ______ 具体的步骤,本方法是基于Excel 2007做出来的,Excel 2003应该也可以,可能具体的菜单项的位置或者名称有点区别.(搜索一下网上的帖子,有一篇提到了使用误差线来画四象限图,但是那种方法...

汪钢悦4633怎么在excel里画四象限图 -
仰科届18123623830 ______ 答:步骤1、制作散点图.假设数据在A1:B13,选中A1:B13区域,鼠标单击“插入”选项卡→“散点图”→“仅带数据标记的散点图”.步骤2、在单元格中设置四象限图的颜色.在E21:F22单元格区域内设置彩色四象限图的四种颜色,每种颜...

汪钢悦4633数学中的三角函数象限的分类 -
仰科届18123623830 ______ 当2kπ当2kπ+π/2当2kπ+π当2kπ+3π/2