Блог

Я бы хотел, чтобы граница холста и четыре синих угла изменения размера появлялись, когда я щелкаю внутри тега canvas. Если, с другой стороны, я щелкаю за пределами тега canvas, граница и четыре синих угла должны исчезнуть.

Это мой код, но он плохо работает для него:

 <style>
.resize
{
    position:absolute;
     border-color:black;
     border-style:solid;
     border-width:1px;
}

.ui-wrapper{
z-index: 999 !important;
}
.ui-resizable-se{
 width: 7px;
 height: 7px;
 background-color: #D0F2F0;
 border-color:#45C1B1;
 border-style:solid;
 border-width:1px;
 bottom:0px;
 right:0px;
}

.ui-resizable-sw{
 width: 7px;
 height: 7px;
 background-color: #D0F2F0;
 border-color:#45C1B1;
 border-style:solid;
 border-width:1px;
 bottom:0px;
 left:0px;
 position:absolute;
 z-index:999 !important;
}
.ui-resizable-nw{
 width: 7px;
 height: 7px;
 background-color: #D0F2F0;
 border-color:#45C1B1;
 border-style:solid;
 border-width:1px;
 top:0px;
 left:0px;
 position:absolute;
 z-index:999 !important;
}
.ui-resizable-ne{
 width: 7px;
 height: 7px;
 background-color: #D0F2F0;
 border-color:#45C1B1;
 border-style:solid;
 border-width:1px;
 top:0px;
 right:0px;
 position:absolute;
 z-index:999 !important;
}
.ui-resizable-se{position:absolute;z-index:999 !important;}
</style>
 

 <canvas id="canvas" class="resize" style="width:200px;height:200px;"></canvas>
    <input type="file" id="file-input">

$(function() {
            $('#file-input').change(function(e) {
                var file = e.target.files[0],
                    imageType = /image.*/;

                if (!file.type.match(imageType))
                    return;

                var reader = new FileReader();
                reader.onload = fileOnload;
                reader.readAsDataURL(file);
            });

            function fileOnload(e) {
                var $img = $('<img>', { src: e.target.result });
                $img.load(function() {
                    var canvas = $('#canvas')[0];
                    var context = canvas.getContext('2d');

                    canvas.width = this.naturalWidth;
                    canvas.height = this.naturalHeight;
                    context.drawImage(this, 0, 0);
                });
            }
                    });

            window.zindex = 30;

                $(".resize").resizable({handles: 'ne, se, sw, nw'});
                $(".resize").parent().draggable({
                    stack: "div"
                });
                $(".resize").rotate({
                    bind: {
                        dblclick: function() {
                            $(this).data('angle', $(this).data('angle') 90);
                            var w = $(this).css('width');
                            $(this).parent().rotate({ animateTo: $(this).data('angle')}).css({width: $(this).css('height'), height: w});

                        }
                    }
                });
        
        
        $(document).mouseup(function(e) 
        {
            var container = $("#canvas");

            // if the target of the click isn't the container nor a descendant of the container
            if (!container.is(e.target) amp;amp; container.has(e.target).length === 0) 
            {
                $("#canvas").attr("style","border-style: none !important;");
                $(".ui-resizable-handle").hide();
            }
        });
 

На данный момент я пытаюсь использовать функцию $(document).mouseup, но она не работает вместе с другим моим кодом.

И последнее, я вижу в консоли, что $(…).rotate() не является функцией, почему это?