Rysowanie rectangle Opcje

[rad11]

Panowie mam problem i nie wiem jak go rozwiazac mam nadzieje ze cos podpowiecie:

Mam kontener:

[HTML] pobierz, plaintext 
<div id="myCanvas" style="position:relative;height:250px;width:100%;"></div>
[HTML] pobierz, plaintext 

i rysuje na nim rectangle:

[PHP] pobierz, plaintext 
function drawRectangle(x,y,width,height){
 
            var length = $('#myCanvas').children('div').length;
 
            $('#myCanvas').append('<div class="rectangle'+length+'" style="border: 3px solid red; top:'+y+'; left:'+x+';position:absolute;"></div>');
 
        }
 
        var x;
        var y;
        var width;
        var height;
        var mouseDownX;
        var mouseDownY;
 
        $('#myCanvas').on('mousedown', function(e){
 
            var offset = $("#myCanvas").offset();
            mouseDownX = e.pageX - offset.left;
            mouseDownY = e.pageY - offset.top;
 
 
 
            $(this).on('mousemove', function(e){
                var offset = $("#myCanvas").offset();
                var upX = e.pageX - offset.left;
                var upY = e.pageY - offset.top;
 
                var width = upX - mouseDownX;
                var height = upY - mouseDownY;
                var length = $('#myCanvas').children('div').length;
 
 
 
                $('.rectangle').css({
                    width: width,
                    height: height
                });
            });
            drawRectangle(mouseDownX, mouseDownY);
 
        });
 
 
        $('#myCanvas').on('mouseup', function(e){
            $('#myCanvas').unbind('mousemove');
        });
[PHP] pobierz, plaintext 

Nie wiem jak rozwiazac aby dodanie css dotyczylo aktualnie rysowanego rectangla jakies pomysly?

[markuz]

Nadajesz mu klasę "rectangle'+length" a następnie zmieniasz css-a dla ".rectangle".. Możesz sobie dodać na samym początku var id = 0; potem przy rysowaniu id = length; i przy zmianie css ".rectangle'+id" - powinno działać.

[rad11]

Poradzilem sobie z tym ale pojawil sie kolejny problem, czy istnieje mozliwosc po zakonczeniu rysowania pokazania dialogu ? tzn pokazac dialog kiedy odklikujemy ?

Poradzilem sobie tak ale nie wiem czy to dobre rozwiazanie:

[PHP] pobierz, plaintext 
 
function drawRectangle(x,y){
    var length = $('.viewport').children('div.rectangle').length;
    var length_marker = $('.marker').length
    length_marker = length_marker+1;
    x_marker = x - 12;
    y_marker = y - 29;
    $('.viewport').append('<span class="marker black" style="top:'+y_marker+'px; left:'+x_marker+'px;" display:none;>'+length_marker+'</span><div class="rectangle rectangle'+length+'" style="border: 3px solid red; top:'+y+'px; left:'+x+'px;position:absolute;"></div>');
 
    return true;
}
 
        var x;
        var y;
        var width;
        var height;
        var mouseDownX;
        var mouseDownY;
        var drawed;
        $('.viewport').on('mousedown', function(e){
            var offset = $('.viewport').offset();
            mouseDownX = e.pageX - offset.left;
            mouseDownY = e.pageY - offset.top;
 
            if (e.button == 2) {
                return false;
            } 
 
            $(this).on('mousemove', function(e){
                var offset = $('.viewport').offset();
                var upX = e.pageX - offset.left;
                var upY = e.pageY - offset.top;
                width = upX - mouseDownX;
                height = upY - mouseDownY;
                var length = $('.viewport').children('div.rectangle').length;
                length = length-1;
 
                $('div.rectangle'+length).css({
                    width: width,
                    height: height
                }); 
//                $('.line'+length).css({
//                    width: width
//                });
            });
            drawed = drawRectangle(mouseDownX, mouseDownY);
//            drawLine(mouseDownX, mouseDownY);
 
            $('.viewport').on('mouseup', function(e){
 
                if (drawed == true) {
                    $('<div id="NoteDialog"></div>').dialog({
                        open: function () {
                            $(this).html('<div>'+width+'</div>');
                        }
                    });
                }
                $('.viewport').unbind('mousemove');
            });
 
        });
 
[PHP] pobierz, plaintext 

Ten post edytował rad11 9.12.2014, 21:31:43