console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>户型图面积</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
position: relative;
}
ul {}
li {
list-style: none;
line-height: 35px;
}
#App {
width: 100%;
height: 100%;
}
#viewBox {
float: left;
width: 900px;
min-height: 500px;
border: 1px solid #ccc;
}
#viewBox img {
width: 100%;
z-index: 2;
}
#Blur {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 3;
}
.number-content {
float: left;
width: 400px;
border: 1px solid #000;
height: 600px;
}
.scale-line {
stroke: blue;
}
.line {
stroke: red;
}
.rect {
stroke: #ff6600;
fill: rgba(238, 238, 238, 0.73)
}
text {
fill: #1e1714;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script src="https://d3js.org/d3.v7.min.js">
</script>
</head>
<body>
<div id="App">
<div id="viewBox">
<img src="" alt="" id="img1">
<svg id="Blur">
<line class='scale-line' x1 = '0' x2="0" y1="0" y2="0"></line>
</svg>
</div>
<div class="number-content">
<ul>
<li>
<input type="file" id="Upload" onchange="changePic(this)">
</li>
<li>
<span>全图宽度像素</span><span id="WidthXS">0</span>
</li>
<li>
<span>全图高度像素</span><span id="HeightXS">0</span>
</li>
<li>
<button onclick="defineSCale('width')">定义横向比例</button>
<span>横向比例像素</span><span id="widthScaleXS">0</span>
</li>
<li>
<input type="text" placeholder="相应图例尺寸-横向" id="ScaleInputW">
<button onclick="submitScaleWidth()">确定</button>
</li>
<li>
<span>宽度系数</span><span id="WidthK">0</span>
</li>
<li>
<button onclick="defineSCale('height')">定义竖向比例</button>
<span>竖向比例像素</span><span id="heightScaleXS">0</span>
</li>
<li>
<input type="text" placeholder="相应图例尺寸-竖向" id="ScaleInputH">
<button onclick="submitScaleHeight()">确定</button>
</li>
<li>
<span>高度系数</span><span id="HeightK">0</span>
</li>
<li>
<button onclick="selectMap()">框选面积</button>
<button onclick="selectLong()">距离测量</button>
</li>
<li>
<span>当前:</span>
<span id="Current"></span>
</li>
<li>
<span>面积总和:</span>
<button onclick="outPutMAx()">计算</button>
<span id="MaxMap"></span>
</li>
<li style="color:#ccc">
<p>
请从上到下依序操作,
定义比例尺时请根据户型图给的标线绘制,并填入户型图中比例尺对应的数字,横竖各取一次即可。
</p>
</li>
</ul>
</div>
</div>
</body>
<script>
let realScaleW = 0;
let realScaleH = 0;
let widthK = 0;
let heightK = 0;
function changePic() {
let file = document.getElementById('Upload').files[0]
let reads = new FileReader();
reads.readAsDataURL(file);
reads.onload = function (e) {
document.getElementById('img1').src = this.result;
drawBlur();
}
}
function drawBlur(){
let blur = $('#Blur');
$('#WidthXS').html(blur.width())
$('#HeightXS').html(blur.height())
}
function defineSCale(direction){
$("#Blur").mouseover(function(){
$(this).css("cursor","crosshair");
});
$("#Blur").mousedown((e)=>{
$('.scale-line').attr('x1',e.offsetX);
$('.scale-line').attr('y1',e.offsetY);
$("#Blur").mousemove(moveEvent=>{
$('.scale-line').attr('x2',moveEvent.offsetX);
$('.scale-line').attr('y2',moveEvent.offsetY);
})
})
$("#Blur").mouseup(e=>{
if(direction == 'width'){
$('#widthScaleXS').html(Math.abs($('.scale-line').attr('x2')-$('.scale-line').attr('x1')))
}else{
$('#heightScaleXS').html(Math.abs($('.scale-line').attr('y2')-$('.scale-line').attr('y1')))
}
$("#Blur").mouseover(function(){
$(this).css("cursor","auto");
});
$("#Blur").unbind();
})
}
function submitScaleWidth(){
realScaleW = $('#ScaleInputW').val();
widthK = $('#widthScaleXS').html()/realScaleW;
$('#WidthK').html(widthK)
}
function submitScaleHeight(){
realScaleH = $('#ScaleInputH').val();
heightK = $('#heightScaleXS').html()/realScaleH;
$('#HeightK').html(heightK)
}
function selectMap(){
$("#Blur").unbind();
$("#Blue").mouseover(function(){
$(this).css("cursor","crosshair");
});
let blur = d3.select('#Blur');
let rect = blur.append('rect')
.attr('class','rect');
rect.on('dblclick',()=>{
d3.select(this).remove();
})
let text = blur.append('text').attr('font-size','13px').attr('class','map-item')
$("#Blur").mousedown((e)=>{
let fx = e.offsetX;
let fy = e.offsetY;
rect.attr('x',e.offsetX);
rect.attr('y',e.offsetY);
$("#Blur").mousemove(moveEvent=>{
rect.attr('width',moveEvent.offsetX-fx);
rect.attr('height',moveEvent.offsetY-fy);
text.attr('x',fx + (moveEvent.offsetX-fx)/2 + 6)
text.attr('y',fy + (moveEvent.offsetY-fy)/2)
let realWidth = Math.abs(((moveEvent.offsetX-fx)/widthK).toFixed(2));
let realHeight = Math.abs(((moveEvent.offsetY-fy)/heightK).toFixed(2));
let rectMap = ((realHeight*realWidth)/1000000).toFixed(2);
text.text(rectMap);
$('#Current').html(rectMap + '㎡')
})
})
$("#Blur").mouseup(e=>{
$(this).css("cursor","auto");
$("#Blur").unbind();
selectMap()
})
}
let lineNum = 1;
function selectLong(){
$("#Blur").unbind();
$("#Blue").mouseover(function(){
$(this).css("cursor","crosshair");
});
let blur = d3.select('#Blur');
let line = blur.append('line')
.attr('class','line dis-line-'+ lineNum);
let text = blur.append('text').attr('font-size','13px')
lineNum++;
$("#Blur").mousedown((e)=>{
let fx = e.offsetX;
let fy = e.offsetY;
line.attr('x1',e.offsetX);
line.attr('y1',e.offsetY);
$("#Blur").mousemove(moveEvent=>{
line.attr('x2',moveEvent.offsetX);
line.attr('y2',moveEvent.offsetY);
text.attr('x',fx + (moveEvent.offsetX-fx)/2 + 6)
text.attr('y',fy + (moveEvent.offsetY-fy)/2)
let realWidth = Math.abs(((moveEvent.offsetX-fx)/widthK).toFixed(2));
let realHeight = Math.abs(((moveEvent.offsetY-fy)/heightK).toFixed(2));
text.text(realHeight>realWidth?realHeight:realWidth);
$('#Current').html(`(${realWidth},${realHeight})`)
})
})
$("#Blur").mouseup(e=>{
$(this).css("cursor","auto");
$("#Blur").unbind();
})
}
function outPutMAx(){
let result = 0;
d3.selectAll('.map-item').attr('mark',function(d){
let item = d3.select(this).text()
result+=item*1;
})
$('#MaxMap').html(result + 'M²')
}
</script>
</html>