草庐IT

鼠标拖动绘制矩形pointer-events: none

我写的代码绝对没有问题 2023-03-28 原文
需求是这样的：

在页面的预览图上面绘制一个矩形，画完立即保存，右上角出现一个删除按钮，要立即可以删除。
一开始的思路是使用canvas去实现，把一个透明的画布放在预览图上，滚动的时候，红框就会随着这个画布滚动。那么用一个透明的canvas absolute在画布上是行不通的。然后我就在想那生成一个canvas的高度是整个预览图的长度吧。
但是思考了下，我们的场景预览图可能会有几百几千张，那么生成一个这么长的canvas好像也有点不太好。
并且生成了canvas，虽然也可以绘制一个删除按钮，实现点击，但也无法实现底层预览图上面红框悬浮效果了。
怎么想这里使用canvas去绘制矩形框都是一个又复杂性能又差的方案。
于是，我想怎么才能简单一点，因为需求也只是在图片上画红框而已，那我也没必要非用canvas不可，还得研究canvas的api。决定用js+css去绘制矩形。这样删除悬浮等操作也都很简单了。
那思路明确了，开始吧
参考了一些文章：(关键字就搜鼠标拖动画矩形)
鼠标拖动画矩阵
手把手教你用原生js实现按住鼠标拖动画框

js+css去绘制矩形实现的思路：
  • 给一个红框初始值box，宽度是0高度是0
  • 当鼠标按下的时候，去计算出鼠标的水平垂直坐标（这个水平垂直坐标是针对于绑定mousedown方法的这个元素）
  • 鼠标move的时候，不停的给div设置width和height，而这个width是这么计算的：鼠标移动的e.offsetX - 鼠标按下时的初始e.offsetX。height是：鼠标移动的e.offsetY-鼠标按下时的初始e.offsetY
  • 当鼠标松开/抬起的时候，拖动就结束了，发送新增框框的请求，然后新增接口成功后再去调用渲染红框的请求，请求里返回一个红框的id，点击删除根据id去删除。
遇到的问题

使用的offsetX和offsetY
offsetX：鼠标点击位置相对于触发事件对象的水平距离
offsetY：鼠标点击位置相对于触发事件对象的垂直距离

相对于触发事件对象，这几个字画重点。虽然我事件是绑定在img-content上的，但是当我鼠标移动过程中，触发事件的对象却有可能发生改变。也就是e.target发生了改变，那么offsetX就会不是你想要的。我们可以在控制台打印e.target去看鼠标随意移动后，值的变化。
我出现这种情况的场景有：绘制矩形，正常往下拉没问题，而鼠标缩放回去的时候，我鼠标的触发事件就变成了box本身，而不再是img-content，就会闪烁。
还有：图片上有其他的框元素，如果我鼠标拖拽到其他的框元素上，触发事件就改变，offsetX就变得不是你想要的。矩形就会绘制的不流畅。

解决办法：

给box给图片上其他的框元素加上属性 pointer-events: none;（鼠标事件拜拜，对鼠标事件Say GoodBye!!）
如果你想深度解析pointer-events可以看这篇文章https://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/

解决办法倒是挺简单的，但也有一些局限性。此属性把鼠标事件完全禁用了，当然也包含鼠标的样式

我对pointer-events: none的通俗理解：

pointer-events: none你可以看的到某个元素，但是你无法摸的着，点击不到，点击会穿透触发到下层的元素。none表示鼠标事件穿透该元素并且指定该元素下面的任何东西
display：none; 是你摸不着，但是你也看不见。

js设置代码：

el.style.pointerEvents = 'none'
el.style.pointerEvents = 'auto'
b49668e3db525945245d52d8662074e.png
补充知识

鼠标的按下事件mousedown的which属性，鼠标按下左键为1，中键为2，右键为3

<!DOCTYPE html>
<html>
<body>
<div onmousedown="WhichButton(event)">用您的鼠标按钮之一单击此文本可返回一个数字。
  <p>1 = 鼠标左键</p>
  <p>2 = 鼠标中键</p>
  <p>3 = 鼠标右键</p>
</div>

<p><b>注释：</b>IE8 及更早版本不支持 which 属性。</p>

<script>
function WhichButton(event) {
  alert("You pressed button: " + event.which)
}
</script>

</body>
</html>

用您的鼠标按钮之一单击此文本可返回一个数字。
1 = 鼠标左键

2 = 鼠标中键

3 = 鼠标右键

注释：IE8 及更早版本不支持 which 属性。

pointer-eventspointer的sectioncanvas

有关鼠标拖动绘制矩形pointer-events: none的更多相关文章

  1. ruby - 在 ruby​​ Selenium 中移动鼠标(move_to) - 2

    我正在尝试使用Ruby中的SeleniumWebDriver2.4模拟鼠标移动如果我运行测试，是否应该看到鼠标在我的屏幕上移动？我很困惑。我试过很多不同的方法示例代码:require'selenium-webdriver'driver=Selenium::WebDriver.for:firefoxdriver.navigate.to'http://www.google.com'element=driver.find_element(:id,'gbqfba')那我试过了driver.action.move_to(element).performdriver.mouse.move_to(e

  2. jquery - Rails 4 如何捕捉 ajax :success event - 2

    我正在使用Rails4.0。我正在发送这样的事件(注意:remote=>true):true,:class=>"rate-btnyes-btnbtnbtn-defaultbtn-sm"}%>我的Controller看起来像这样:defratevideo=Video.find_by(hashed_id:params[:id])action=params[:yesno]putsvideo.hashed_idputsactionrespond_todo|format|if(action=='yes')new_rating=video.rating==1?0:1video.update(is_

  3. ruby - 如何将鼠标悬停在(鼠标悬停)Selenium Ruby 中的元素上？ - 2

    有人知道如何在SeleniumRubyWebdriver中将鼠标悬停在元素上吗？我的代码是这样的:el=driver.find_element(:css=>"#foo")driver.move_toel#HowdoItriggeramouseovereventonthiselement?我在Linux32位的Firefox中使用selenium-webdrivergem。 最佳答案 我使用了driver.action.move_to(el).perform，它与其他答案略有不同，所以我想为了完整起见我会把它包括在内。

  4. ruby-on-rails - Rails 中的推杆 : "Unknown auth_key" - server side not triggering events - 2

    我正在尝试将Pusher插入到我已经很晚的Rails应用程序中。客户端工作正常-使用PusherEventCreator触发所需的javascript。但是服务器端不工作:在我的通知Controller中使用以下代码创建要测试的操作:Pusher.trigger('private-4','new_message',{:from=>"christian",:subject=>"hello"})给出这个错误:Pusher::AuthenticationError(Unknownauth_key):app/controllers/notifications_controller.rb:57:

  5. ruby-on-rails - 回形针调整大小并裁剪为矩形 - 2

    所以我期待一系列不同尺寸和纵横比的照片。我希望能够缩小/拉伸(stretch)照片以尽可能适合200x100矩形，然后裁剪不适合的其余部分。我希望裁剪也发生在中心周围。这可能吗？我对imagemagick文档感到很困惑。谢谢! 最佳答案 Paperclip的#选项将完全满足您的需求:在指定尺寸内最大程度地适应图像，然后在中心处利用重力裁剪多余部分。例子:has_attached_file:photo,:styles=>{:original=>"200x100#"}注意:如果您想保持原样不变并生成额外的裁剪缩略图，只需将:origin

  6. ruby - 为什么 Gosu 隐藏我的鼠标指针？ - 2

    我正在使用Gosugem进行一些图形编程。问题是，当我创建一个窗口时，我的鼠标指针被隐藏了。我可以猜到鼠标在某个时刻的位置，我可以凭直觉点击，但我的用户可能不会。如何显示指针？ 最佳答案 如果你想使用系统光标你可以这样做classWindow查看libgosu的文档RubyGosurdocReference/Window 关于ruby-为什么Gosu隐藏我的鼠标指针？，我们在StackOverflow上找到一个类似的问题： https://stackoverf

  7. ruby - 在 Ruby 中绘制点和矩形 - 2

    我正在寻找一种简单的方法来绘制大约10个点和矩形，以便能够查看我的算法哪里出了问题。我查看了gnuplot，但似乎绘制矩形特别糟糕。 最佳答案 SVG(MDNTutorial)是一种非常简单的基于文本(XML)的格式，您可以使用Ruby轻松生成它，而无需任何SVG库，并可以在任何现代Web浏览器中查看。这是一个示例:通过字符串插值的SVG点points=(0..5).map{[rand(100)-50,rand(100)-50]}puts#{points.map{|x,y|""}.join("\n")}ENDSVG输出:http:/

  8. 从零开始编写Web自动化测试脚本(六)--鼠标、键盘操作 - 2

    第一章Selenium+WebDriver环境搭建第二章Selenium定位方式第三章元素常用属性第四章自动化中的三种等待第五章自动化浏览器设置及句柄、窗口切换操作第六章鼠标、键盘操作第七章javascript在自动化中的应用第八章unittest&断言第九章ddt数据驱动第十章测试框架搭建过程Python+Selenium+BeautifulReport文章目录一、鼠标操作二、键盘操作一、鼠标操作1、在web测试中，鼠标的操作包含在ActionChains类中，经常用到的有单击、双击、右击、拖动等操作。2、在使用鼠标操作前需要先导入ActionChains类包：fromselenium.we

  9. ruby - 如何使用 Ruby 将键盘和鼠标命令发送到底层操作系统？ - 2

    是否有操作系统中立的方式让Ruby将键盘和鼠标事件发送到底层操作系统？(对我而言)一个明显的方法是使用Ruby/Java绑定(bind)并使用java.awt.Robot，但这看起来很愚蠢。 最佳答案 对于Mac:geminstallrb-appscript然后你可以用这样的脚本来测试它:require"rubygems"require"appscript"includeAppscriptapp("TextEdit").activateapp("SystemEvents").keystroke("LookMa,keystrokes!

  10. Ruby Sinatra 在没有 PEM 和 OpenSSL::SSL::VERIFY_NONE 的情况下创建发布请求 - 2

    我尝试使用SSL创建POST请求，但没有OpenSSL::SSL::VERIFY_NONE，因为它打开了安全攻击并且没有PEM证书。但是我遇到了问题，我发送POST请求的ruby​​代码:post'/test/test1'docross_originpost_data=request.body.readres_Data=JSON.parse(post_data)userName=res_Data['username']@responseFromServer=''uri=URI('https://test.com/test1')Net::HTTP.start(uri.host,uri.p

随机推荐