如何制作可调整大小的矩形选择工具？
要制作一个可调整大小的矩形选择工具，您可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例：
- HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizable Rectangle Tool</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="rectangle" id="rectangle">
<div class="handler handler-top"></div>
<div class="handler handler-right"></div>
<div class="handler handler-bottom"></div>
<div class="handler handler-left"></div>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>- CSS代码（styles.css）：
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
width: 50%;
height: 50%;
position: relative;
background-color: #ffffff;
}
.rectangle {
width: 50%;
height: 50%;
position: absolute;
border: 2px solid #000000;
display: flex;
justify-content: center;
align-items: center;
}
.handler {
position: absolute;
width: 10px;
height: 10px;
background-color: #000000;
cursor: pointer;
}
.handler-top {
top: -5px;
left: 50%;
transform: translateX(-50%);
}
.handler-right {
right: -5px;
top: 50%;
transform: translateY(-50%);
}
.handler-bottom {
bottom: -5px;
left: 50%;
transform: translateX(-50%);
}
.handler-left {
left: -5px;
top: 50%;
transform: translateY(-50%);
}- JavaScript代码（scripts.js）：
const rectangle = document.getElementById('rectangle');
const handlers = document.querySelectorAll('.handler');
handlers.forEach(handler => {
handler.addEventListener('mousedown', (e) => {
const startX = e.clientX;
const startY = e.clientY;
const startWidth = parseInt(rectangle.style.width);
const startHeight = parseInt(rectangle.style.height);
const onMouseMove = (e) => {
let width = startWidth + e.clientX - startX;
let height = startHeight + e.clientY - startY;
if (width < 50) width = 50;
if (height < 50) height = 50;
rectangle.style.width = width + 'px';
rectangle.style.height = height + 'px';
};
const onMouseUp = () => {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
};
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
});这个示例中，我们使用HTML和CSS创建了一个可调整大小的矩形，并使用JavaScript实现了调整大小的功能。您可以根据需要进行修改和扩展。
相关·内容
4回答
我正在尝试使用C# 2008或QT4编写一个非常简单的照片编辑器。
如何像photoshop一样制作一个可调整大小的矩形选择工具？
浏览 0提问于2009-04-04得票数 6
1回答
我正在尝试制作工具，用它可以帮助您选择KineticJS阶段可用的对象，我目前只能做可调整大小的矩形，任何帮助都是值得赞赏的。谢谢!
，这是我到目前为止所做的。
浏览 2提问于2013-10-29得票数 0
回答已采纳
我正在尝试做一个项目，在那里你可以提交一个图像并从中选择球员(基本上是在他们周围画一个可调整大小的矩形)。但我不确定从何说起。有人能提供一个工具，npm模块，或文章，可以帮助我完成这一点吗？类似这样，但是所有的矩形都是可调整大小和可拖动的 ? 谢谢
浏览 13提问于2021-09-19得票数 1
回答已采纳
然后，您的应用程序将在屏幕上显示一个图像。我该如何做到这一点。我不知道该怎么做。如何制作rectangular box，使用触摸拖动它，然后选择该portion of image
浏览 1提问于2013-03-30得票数 2
回答已采纳
我正在做一个HTML5项目，在这个项目中，我必须制作带有边界的文本。我正在使用ctx.strokeRect(x，y，width，Height)绘制矩形。我的形状(矩形)是可调整大小的。我想在矩形内插入textarea或div，以便在调整文本大小时自动调整大小。
浏览 0提问于2012-07-17得票数 0
我想选择相机视图的特定部分。我正在考虑画一个可调整大小的矩形/圆，它的大小可以通过触摸动态改变。
浏览 2提问于2013-03-16得票数 0
回答已采纳
1回答
我在互联网上搜索过，但我发现没有办法在raphael JS中制作可调整大小的矩形；我希望制作出既能在平板电脑上工作又能交互的东西，所以这就是为什么右键单击是一种解决方案。你有什么可以帮助我的想法吗？
浏览 0提问于2012-04-19得票数 2
回答已采纳
1回答
我需要裁剪一张图片使用一个可调整大小的矩形基于用户触摸事件。我之所以这样做，是因为并非所有设备都支持裁剪意图功能，所以我创建了自己的功能。如何创建像这样的可调整大小</e
浏览 0提问于2012-07-05得票数 5
回答已采纳
我在UI画布上有一个scrollrect对象，它有一个viewport对象子对象，而viewport对象有一个content对象子对象，用于存储所有要滚动的项。 ? 我已经选择了视口作为参考。我想相对于LevelScroller调整视口矩形的大小(请参阅层次结构)，以便滚动视图周围有一个边距，这样滚动项就不会接触灰色LevelScroller矩形的边缘。但是视口矩形是不可调整大小的。现在
浏览 115提问于2019-05-27得票数 1
回答已采纳
2回答
我试图在我的应用程序中做一些ROI (感兴趣区域)选择，但我不知道如何创建某种可调整大小(通过手指)的矩形，就像你在Google Goggles中看到的那样。你能帮帮我吗?有没有源代码的例子？
浏览 5提问于2011-03-20得票数 6
回答已采纳
我有一个问题:我是否可以动态地将缩放选择框颜色(selectionMarkerFill: rgba(69,114,167,0.25) -属性的默认值)更改为任意颜色。我在页面上获得了一个带有Jquery UI可调整大小的元素。因此，当我调整元素大小时，HighChart开始绘制一个蓝色缩放矩形。所以我只想让选择框的颜色在可调整大小插件的"start“事件上透明，并在&qu
浏览 7提问于2013-08-06得票数 1
在WPF中，制作可调整大小的图形/艺术品非常容易。您只需创建一个DrawingBrush并将其用作矩形或形状的填充。或者，您可以简单地使用一个VisualBrush，它引用带有形状/路径的画布。那么，如何最好地在Silverlight中创建可调整大小的图形呢？
我玩过使用路径和把拉伸属性设置成统一的.甚至把几条路组合成一条复合路径..。但是，这种方法有其局限性(
浏览 5提问于2010-02-09得票数 0
回答已采纳
1回答
我目前正在用ASP.net MVC编写一个应用程序，我正在寻找一个插件或任何可以帮助我绘制和管理矩形的工具。矩形应该是可调整大小的，可移动的，它们应该由8个点组成(在每个角的中间和每个角)。你有什么好的建议吗？:)
谢谢你们很多人。
浏览 2提问于2011-01-25得票数 0
回答已采纳
1回答
如何使用可调整大小的矩形使图像视图的一部分可选？(就像农作物的功能)。图像视图：
编辑:我已经使用画布在图像视图上成功地绘制了一个矩形。如何使绘制的矩形可由用户拖动？
浏览 3提问于2014-05-10得票数 2
回答已采纳
2回答
我正在制作一个画布上的绘图/设计工具，使用的是动画片库。我有矩形(灰色填充，黑色边框)作为我需要调整大小的对象，我有8个选择节点(棕色矩形)。此设置的问题
浏览 2提问于2013-11-23得票数 3
回答已采纳
我需要选择在画布中显示的图像的一个区域，然后，可以在画布上移动选择。Javascript将是理想的选择，不需要jquery基本上，我使用mousedown和click事件来获取裁剪/选择区域的坐标
我希望正确照片上的黑色矩形能被看到。我尝试使该矩形可移动和可调整大小，以获得选定区域的坐标，而不仅仅是从前面的两个事件。就像在画
浏览 0提问于2020-11-27得票数 0
1回答
我想创建一个像这样的窗口：如果我关闭一个组件，我希望我的组件像这样调整大小：是否有一个小组这样做，如果没有，我该怎么办？
浏览 1提问于2015-04-21得票数 0
回答已采纳
在管理界面中，允许在图像上创建、可移动和可调整大小的矩形。我可以在图像上创建多个可移动和可调整大小的矩形，并将坐标值保存到数据库中。在用户界面中，使用数据库保存的坐标填充图像地图，但矩形位置在桌面和移动浏览器视图上都没有正确显示。
这里是我的源代码 。完成图像上的矩形绘图后，请单击“运行”按钮和鼠标悬停到图像上，以检查呈现的地图区域(矩形
浏览 6提问于2020-02-28得票数 0
2回答
我试着用Java画一个矩形。我设置了框架大小(800,400)和可调整大小(False)矩形的x= 50，y= 50 width = 700 height = 300。为什么它不在中间？谢谢。
浏览 2提问于2012-12-06得票数 2
回答已采纳
1回答
我目前正在尝试显示一个具有几个突出显示和可修改的感兴趣区域的图像。我想通过使用matplotlib.widgets中的矩形选择器来解决这个问题。问题是我不能混合在多个持久的、可拖动的、可调整大小的边界框中。 here就是一个例子。 如果你有其他方法，请让我知道。 我希望有多个矩形选择器对象，就像上面提到的例子。我希望你能帮助我。
浏览 21提问于2019-05-26得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
