Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.7k views
in Technique[技术] by (71.8m points)

请问在图片上画图,怎么保持画的正方形大小一致

请问怎么点击画图后,每次画图都是同正方形,画正方形可以在同一个地方显示

如图
image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .active{
        width: 720px;
        height: 576px;
        background-size: 100%;
        overflow: hidden;
    }
    .box{
        position: absolute;
        border: 2px solid #f00;
        cursor: move;
    }
</style>
<body>
<div id="h-coverImg" class="active"  style="position: relative;z-index:1;" onmousedown="rect_mousedown(event)" onmousemove="rect_mousemove(event)">
    <img src="../images/333.jpg" name="bigimg" border="0" draggable="false" id="region_cover" style="height:100%;width:100%;position: absolute;z-index:0;margin-left:0px;margin-top:0px;border:1px solid #ccc;"/>
    <div id="draw_box0" class="box" style="top: 0px; left: 0px; width: 0px; height: 0px;display:none;background-color: black;"></div> <!--background-color: black;-->
    <div id="draw_box1" class="box" style="top: 0px; left: 0px; width: 0px; height: 0px;display:none;background-color: black;"></div>
    <div id="draw_box2" class="box" style="top: 0px; left: 0px; width: 0px; height: 0px;display:none;background-color: black;"></div>
    <div id="draw_box3" class="box" style="top: 0px; left: 0px; width: 0px; height: 0px;display:none;background-color: black;"></div>
    <div id="draw_box4" class="box" style="top: 0px; left: 0px; width: 0px; height: 0px;display:none;background-color: black;"></div>
</div>

</body>
<!--<script language="javascript" type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>-->
 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(document).ready(function () {

        // 鼠标抬起
        document.onmouseup = function (e) {
            if (draw_begin || dragging) {
                var box_id = "draw_box" + current_box_number;
                var active_box;
                var width; //右
                var height; //下

                if (dragging) {
                    active_box = document.getElementById(dragging_id);
                    startX = parseFloat(active_box.style.left.split('p')[0]); //左
                    startY = parseFloat(active_box.style.top.split('p')[0]); //上
                }
                else {
                    active_box = document.getElementById(box_id);
                }

                width = active_box.style.width.split('p');
                height = active_box.style.height.split('p');

                if (parseFloat(width) < 14 || parseFloat(height) < 14) {
                   /* toastr["info"]("屏蔽区域至少大于10个像素");*/
                    active_box.style.width = 0;
                    active_box.style.height = 0;
                    active_box.style.display = "none";
                }
                else {
                    if (draw_begin == true) {
                        current_box_number += 1;
                    }
                }
                ;


               /* do_set_privacy();*/
                dragging = false;
                draw_begin = false;
            }
        };


    });

    var dragging_id;
    var dragging = false;
    var draw_begin = false;
    var startX = 0;
    var startY = 0;
    var diffX = 0;
    var diffY = 0;

    var start_drag_x = 0;
    var start_drag_y = 0;
    var end_drag_x = 0;
    var end_drag_y = 0;
    var current_box_number = 0;

    //清楚图像
    window.clear_draw = function () {
        startX = 0;
        startY = 0;
        diffX = 0;
        diffY = 0;
        current_box_number = 0;
        for (var i = 0; i < 5; i++) {
            var box_id = "draw_box" + i;
            var active_box = document.getElementById(box_id);
            active_box.style.left = 0 + 'px';
            active_box.style.top = 0 + 'px';
            active_box.style.width = 0 + 'px';
            active_box.style.height = 0 + 'px';
            active_box.style.display = "none";
        }
        $("#draw1").css("display", 'none');
        $("#draw2").css("display", 'none');
        $("#draw3").css("display", 'none');
        $("#draw4").css("display", 'none');
        $("#draw5").css("display", 'none');

        videoShadeEmpty();
    };

    //事件会在鼠标按键被按下时发生。
    window.rect_mousedown = function (e) {
        //var b = e | window.event;
        var event = e || window.event;
        var target = event.target || event.srcElement; //获取document 对象的引用

        // 如果鼠标在 box 上被按下,设置屏蔽图像
        if (target.id.match(/region_cover/)) {
            //
            if (current_box_number == 5) {
                return;
            }

            startX = event.offsetX;
            startY = event.offsetY;
            var box_id = "draw_box" + current_box_number;
            var active_box = document.getElementById(box_id);
            active_box.style.display = "block";
            active_box.style.top = startY + 'px';
            active_box.style.left = startX + 'px';
            active_box.style.width = 0;
            active_box.style.height = 0;
            draw_begin = true;
            //console.log(draw_begin);
        }
        else {
            active_box = document.getElementById(target.id);
            startX = parseInt(active_box.style.left.split('p')[0]);
            startY = parseInt(active_box.style.top.split('p')[0]);
            // 允许拖动
            dragging = true;
            dragging_id = target.id;
            start_drag_x = event.clientX;
            start_drag_y = event.clientY;
            //console.log('start_drag_x:' + event.clientX + "  start_drag_y:" +  event.clientY);
            //console.log('startX:' + startX + "  startY:" +  startY);
        }
    };

    //2
    window.rect_mousemove = function (e) {
        //获取相对于当前所指向对象的位置坐标
        var event = e || window.event;
        var target = event.target || event.srcElement; //获取document 对象的引用

        var obj = document.getElementById("h-coverImg");
        var active_box;
        // 更新 box 尺寸
        if (draw_begin == true && dragging == false) {
            var width = 0;
            var height = 0;
            var box_id = "draw_box" + current_box_number;
            active_box = document.getElementById(box_id);

            if (event.offsetX > 3 && event.offsetY > 3) {
                if (target.className.match(/box/)) {
                    width = event.offsetX;
                    height = event.offsetY;
                }
                else if (event.offsetX > startX && event.offsetY > startY) {
                    width = event.offsetX - startX;
                    height = event.offsetY - startY;
                }

                if ((width + startX) > obj.offsetWidth - 5) {
                    width = obj.offsetWidth - 5 - startX;
                }

                if ((height + startY) > (obj.offsetHeight - 5)) {
                    height = obj.offsetHeight - 5 - startY;
                }

                active_box.style.width = width + 'px';
                active_box.style.height = height + 'px';
            }
            console.log("更新 box 尺寸1");
        }

        // 移动,更新 box 坐标
        if (dragging) {
            var left = 0;
            var top = 0;

            active_box = document.getElementById(dragging_id);

            var width = parseInt(active_box.style.width.split('p')[0]);
            var height = parseInt(active_box.style.height.split('p')[0]);

            left = startX + (event.clientX - start_drag_x);
            top = startY + (event.clientY - start_drag_y);

            if (left < 1) {
                left = 0;
            }

            if (top < 1) {
                top = 0;
            }

            if ((left + width) > (obj.offsetWidth - 5)) {
                left = obj.offsetWidth - width - 5;
            }

            if ((top + height) > (obj.offsetHeight - 5)) {
                top = obj.offsetHeight - height - 5;
            }

            active_box.style.left = left + 'px';
            active_box.style.top = top + 'px';
            console.log("更新 box 坐标2");
        }
    };
</script>
</html>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

人工手绘很难做到控制,所以可以另辟蹊跷,比如:
1、正方形改由点击按钮生成,正方形的宽高就是固定的,或某一个可自定义的值。这样就可以多次生成,生成的大小也都是一样的
2、绘制好正方形可以选择,选择后进行复制粘贴,这样也能做到

这两种都需要正方形可以拖拽移动


重新写了个,没有图片,用一个黑色背景的div代替的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .myImg{
        height:100%;width:100%;
        position: absolute;
        z-index:0;margin-left:0px;margin-top:0px;
        border:1px solid #ccc;
        background: #000;
    }
    #h-coverImg{
        position: relative;
        z-index:1;
        width: 720px;
        height: 576px;
        background-size: 100%;
        overflow: hidden;
    }
    #h-coverImg .box{
        position: absolute;
        border: 2px solid #f00;
        cursor: move;
        top: 0px; left: 0px;
        color: red;
        font-size: 14px;
        font-weight: bold;
    }
    #h-coverImg .box:hover{
        background: rgba(255, 0, 0, .4);
    }
</style>
<body>
    <p>
        宽高:<input type="text" id="box-width" value="100"/>
        <button id="creatBtn">creat box</button>
    </p>
<div id="h-coverImg">
    <div class="myImg"></div>
</div>

</body>
<!--<script language="javascript" type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>-->
 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
    $('#creatBtn').on('click', function(){
        var val = $('#box-width').val()
        console.log(val)
        if(!val){
            return alert('请输入元素宽高')
        }
        if(isNaN(val)){
            return alert('元素宽高应该是一个数字')
        }
        
        creatEle( Number(val) )
    })
    
    var count = 0
    function creatEle(width){
        var $box = $('<div class="box"></div>')
        $box.css({
            width: width,
            height: width
        }).html(++count).wmDrag();
        
        $('#h-coverImg').append($box)
    }
    
    $.fn.wmDrag = function(){
        return this.each(function(index, oDiv){
            oDiv.draggable = false
            oDiv.style.cursor = 'move'
            oDiv.onmousedown = function (e) {
                if(e.button == 2)return; //过滤右键按下事件
                    
                var omousemove = document.onmousemove,
                    omouseup = document.onmouseup;
                                
                //鼠标按下,计算当前元素距离可视区的距离
                var disX = e.clientX,
                    disY = e.clientY,
                    sty = window.getComputedStyle(oDiv),
                    transition = sty.transition,
                    left = parseInt(sty.left),
                    top = parseInt(sty.top),
                    
                    $parent = $(oDiv).parent(),
                    //maxL = document.body.clientWidth - parseInt(sty.width),
                    maxL = $parent.width() - parseInt(sty.width),
                    //maxT = document.body.clientHeight - parseInt(sty.height);
                    maxT = $parent.height() - parseInt(sty.height);
                    
                  oDiv.style.transition = 'none'
                
                oDiv.style.left = left + 'px'
                oDiv.style.top = top + 'px'
                oDiv.style.bottom = oDiv.style.right = 'auto'
                
                document.onmousemove = function (e) {
                    //通过事件委托,计算移动的距离
                    var l = e.clientX - disX;
                    var t = e.clientY - disY;
                    l = left + l
                    l = l > maxL ? maxL : l < 0 ? 0 : l
                    t = top + t
                    t = t > maxT ? maxT : t < 0 ? 0 : t
    
                    //移动当前元素  
                    oDiv.style.left = l + 'px';
                    oDiv.style.top = t + 'px';
                };
                document.onmouseup = function (e) {
                    document.onmousemove = omousemove;
                    document.onmouseup = omouseup;
                            
                    oDiv.style.transition = transition
                };
            };
        })
    }
</script>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...