javascript - 使用css在div中调整大小的对角线
问题描述
我需要一个矩形 div 的帮助,它的对角线长度使用 js 增加或减少。我想在对角线中插入一条线来标记对角线长度,因为使用 +/- 按钮最小化或最大化对角线。
我希望线条自动调整大小而不会降低质量。我想保持背景颜色为绿色,图像和标签颜色为白色。为此,我想使用 css 来绘制线条而不是图像。我附上了 div 应该是什么样子的图像。
非常感谢您的支持。
function max(){
var w = document.getElementById('resizable').clientHeight;
var h = document.getElementById('resizable').clientWidth;
document.getElementById('resizable').style.height = h + 5 +'px';
document.getElementById('resizable').style.width= w + 5 +'px';
}
function min(){
var w = document.getElementById('resizable').clientHeight;
var h = document.getElementById('resizable').clientWidth;
document.getElementById('resizable').style.height = h - 5 +'px';
document.getElementById('resizable').style.width= w - 5 +'px';
}
<button class="btn" id="increase" onClick="max()">Max (+)</button>
<button class="btn" id="decrease" onClick="min()">Min (-)</button>
<div id="resizable" style="border:1px solid black;background-color:green;width:100px;height:50px;">
</div>
解决方案
您可以将另一个 div 与position:absolute
const dash = document.getElementById('dash')
const div = document.getElementById('resizable')
function getLength() {
dash.textContent = Math.floor(Math.sqrt((Math.pow(div.clientHeight, 2) + Math.pow(div.clientWidth, 2))))
}
function max() {
var h = document.getElementById('resizable').clientHeight;
var w = document.getElementById('resizable').clientWidth;
const angle = Math.atan(h / w) * 180 / Math.PI;
document.getElementById('resizable').style.height = h + 5 + 'px';
document.getElementById('resizable').style.width = w + 5 + 'px';
dash.style.transform = `rotate(${angle}deg)`;
getLength()
}
function min() {
var h = document.getElementById('resizable').clientHeight;
var w = document.getElementById('resizable').clientWidth;
const angle = Math.atan(h / w) * 180 / Math.PI;
document.getElementById('resizable').style.height = h - 5 + 'px';
document.getElementById('resizable').style.width = w - 5 + 'px';
dash.style.transform = `rotate(${angle}deg)`;
getLength()
}
getLength()
#resizable {
border: 1px solid black;
background-color: green;
width: 100px;
height: 50px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
#dash {
position: absolute;
text-align: center;
content: "";
line-height: 0;
width: 150%;
height: 1px;
background-color: #fff;
transform: rotate(26.5deg);
}
<button class="btn" id="increase" onClick="max()">Max (+)</button>
<button class="btn" id="decrease" onClick="min()">Min (-)</button>
<div id="resizable">
<div id="dash"></div>
</div>
推荐阅读
- string - 我想在 println 中运行一个循环
- c# - 如何使用 SQLite 数据库中的数据填充 ListView
- php - 按名称和返回路径递归搜索目录
- oauth - 我可以在没有客户端密码的情况下使用带有 PKCE 的 IdentityServer3 授权代码流吗?
- python-3.x - 如何停止 matplotlib 图例文本重叠?
- bash - 是否可以仅为当前命令会话禁用网络?
- python - 如何在 QTextEdit() 的第一个输入中从第二个窗口获取信息
- powershell - 新用户 powershell 获取服务
- swiftui - swiftui 是否有 hitTest 等价物?
- c# - 使用 Linq 进行列求和