我需要有关使用 js 增加或减少对 Angular 线长度的矩形 div 的帮助。我想在对 Angular 线中插入一条线来标记对 Angular 线长度,因为使用 +/- 按钮最小化或最大化对 Angular 线。
我希望线条自动调整大小而不损失质量。我想保持背景颜色为绿色,图像和标签颜色为白色。为此,我想使用 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>
最佳答案
您可以使用另一个带有 position:absolute
的 div
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>
关于javascript - 使用 css 调整 div 中对 Angular 线的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67920636/