SOURCE

console 命令行工具 X clear

                    
>
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="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/d3/build/d3.min.js"></script> -->
	<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>