草庐IT

javascript - 调整旋转元素上的 handle 大小

coder 2024-05-16 原文

我正在尝试将调整大小的 handle 放在矩形的四个 Angular 上，可以拖动它来调整矩形的大小。我遇到的问题是在拖动矩形的一个点后计算矩形的新宽度、新高度和新点。

如果矩形不旋转，这显然很容易，因为宽度和高度的变化量与鼠标的 offsetX 和 offsetY 相同。然而，这个矩形可以旋转，所以 offsetX 和 offsetY 不匹配宽度/高度的变化。

在上图中，我用纯黑色表示我已有的信息，用浅灰色表示我想查找的信息。我试图展示如果我将 a1 Angular 向上和向右拖动，矩形应该如何变化。

谁能帮我弄清楚如何计算缺失的信息？

感谢您的帮助!非常感谢。

--

编辑:我在每个 handle 上都有拖动开始、拖动移动和拖动结束回调。我当前的代码只是获取新点(在本例中为 a2)。不幸的是，这只是将我们当前正在拖动的 handle 移动到它的新位置，但显然对矩形的宽度/高度及其其他点的位置没有影响。我希望得到帮助的是如何根据这个拖动计算新的宽度和高度，以及其他点的新位置。

handle 坐标(拖动前)

handles: { 
  a: { x: 11, y: 31 },
  b: { x: 44, y: 12 }, 
  c: { x: 39, y: 2 }, 
  d: { x: 6, y: 21 }
};

回调:

// Save the original x and original y coordinates
// of the handle, before dragging
onDragStart: function(x, y, handle) {
  handle.data({
   ox: x,
   oy: y
  });
}

// While dragging the handle, update it's coordinates to 
// reflect its new position
onDragMove: function(dx, dy, handle) {
  handle.attr({
   x: handle.data('ox') + dx,
   y: handle.data('oy') + dy
  });
}

// Not currently using the drag end callback
onDragEnd: function(x,y,handle) {}

最佳答案

http://en.wikipedia.org/wiki/Cartesian_coordinate_system#Distance_between_two_points给你找到 a1 到 a2 的长度的方法

var len=Math.sqrt(Math.pow(a2x-a1x,2)+Math.pow(a2y-a1y,2));

然后查看由灰线和黑线(我们称其为 H 点)与 a1 和 a2 的交点形成的三 Angular 形。可以用三 Angular 函数来求解。所以由线 d1 到 c1 与底部形成的 Angular 可以称为旋转 Angular (R)。这意味着 R 等于 a2 处的 Angular ，而 a1 处的 Angular 等于 90-R。找到侧面然后你去

//line from a2 to H 
var hDif=Math.sin(R)*len;
//line from a1 to H
var wDif=Math.cos(R)*len;

然后您可以使用这些来找到新的长度和高度。将进行更多计算以查看您是在旧的宽度和高度上增加还是减少。

关于javascript - 调整旋转元素上的 handle 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20366892/

javascripthandlesectionAngularrotationresizedraggabledrag

有关javascript - 调整旋转元素上的 handle 大小的更多相关文章

  1. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  2. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  3. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新ruby​​gems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  4. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  5. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  6. 旋转矩阵的几何意义 - 2

    点向量坐标矩阵的几何意义介绍旋转矩阵的几何含义之前，先介绍一下点向量坐标矩阵的几何含义点：在一维空间下就是一个标量，如同一条直线上，以任意某一个位置为0点，以一定的尺度间隔为1，2，3...,相反方向为-1，-2，-3...；如此就形成了一维坐标系，这时候任何一个点都可以用一个数值表示，如点p1=5，即即从原点出发沿着x轴正方向移动5个尺度；点p2=-3，负方向移动3个尺度；     在一维坐标系上过原点做垂直于一维坐标系的直线，则形成了二维坐标系，此时描述一个点需要两个数值来表示点p3=（3，2），即从原点出发沿着x轴正方向移动3个尺度，在此基础上沿着y轴正方向移动两个尺度的位置就是点p3。

  7. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  8. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  9. HBase Region 简介和建议数量&大小 - 2

    Region是HBase数据管理的基本单位,region有一点像关系型数据的分区。region中存储这用户的真实数据，而为了管理这些数据，HBase使用了RegionSever来管理region。Region的结构hbaseregion的大小设置默认情况下，每个Table起初只有一个Region，随着数据的不断写入，Region会自动进行拆分。刚拆分时，两个子Region都位于当前的RegionServer，但处于负载均衡的考虑，HMaster有可能会将某个Region转移给其他的RegionServer。RegionSplit时机：当1个region中的某个Store下所有StoreFile

  10. ruby-on-rails - Ruby - 如何从 ruby​​ 上的 .pfx 文件中提取公钥、rsa 私钥和 CA key - 2

    我有一个.pfx格式的证书，我需要使用ruby​​提取公共(public)、私有(private)和CA证书。使用shell我可以这样做:#ExtractPublicKey(askforpassword)opensslpkcs12-infile.pfx-outfile_public.pem-clcerts-nokeys#ExtractCertificateAuthorityKey(askforpassword)opensslpkcs12-infile.pfx-outfile_ca.pem-cacerts-nokeys#ExtractPrivateKey(askforpassword)o

随机推荐