自定義覆蓋使用CSS的div - 自定義手柄的jQuery可調整大小

Question

嗨，我使用jquery resizable，可旋轉（）[https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.min.js]在我的項目中。

所以當這個函數調用我得到句柄來旋轉和調整div的大小。

$(function() { 
 

 
     var inputLocalFont = document.getElementById("user_file"); 
 
     inputLocalFont.addEventListener("change",previewImages,false); 
 

 
     function previewImages(){ 
 
      var fileList = this.files; 
 

 
      var anyWindow = window.URL || window.webkitURL; 
 

 
       for(var i = 0; i < fileList.length; i++){ 
 
        var objectUrl = anyWindow.createObjectURL(fileList[i]); 
 
        $('.new-multiple').append('<div class="img-div"><img src="' + objectUrl + '" class="newly-added" /></div>'); 
 
        window.URL.revokeObjectURL(fileList[i]); 
 
       } 
 

 
     $(".img-div").draggable(); 
 
\t  $('.img-div').rotatable(); 
 
     $(".img-div").resizable({aspectRatio:true}); 
 
       $(".newly-added").on("click", function(e) { 
 
\t $(".newly-added").removeClass("img-selected"); 
 
     $(this).addClass("img-selected"); 
 
\t  e.stopPropagation() 
 
    }); 
 

 
\t $(document).on("click", function(e) { 
 
\t \t if ($(e.target).is(".newly-added") === false) { 
 
\t \t $(".newly-added").removeClass("img-selected"); 
 
\t \t } 
 
\t }); 
 
       
 
       } 
 
});

.new-multiple{ 
 
    width:400px !important; 
 
    height:400px !important; 
 
    background:white; 
 
    border:2px solid red; 
 
    overflow:hidden; 
 
    } 
 
    
 
    
 
.img-div{ 
 
    width:200px; 
 
    height:200px; 
 
} 
 
.newly-added{ 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
.img-selected{ 
 
    box-shadow: 1px 2px 6px 6px rgb(206, 206, 206); 
 
    border:2px solid rgb(145, 44, 94); 
 
} 
 
.ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se { 
 
    background-color: white; 
 
    border: 1px solid tomato; 
 
} 
 
.ui-rotatable-handle.ui-draggable { 
 
    background-color: white !important; 
 
    border: 1px solid tomato; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> \t 
 
<script src="https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.min.js"></script> 
 
<input name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file"> 
 

 
<div class="new-multiple"></div>

https://jsfiddle.net/vd11qyzv/21/

所以，當我上傳的圖像，我得到控制處理這樣

但我希望把定製控制手柄這樣的

我怎樣才能實現這一點使用CSS和jQuery。請幫助

Answer 1

當您將handles選項設置爲可調整大小時，可以使用CSS來管理它們。他們的風格和位置。

CSS代碼段

.ui-resizable-handle { 
    border: 0; 
    border-radius: 50%; 
    background-color: #00CCff; 
    width: 14px; 
    height: 14px; 
} 

.ui-resizable-nw { 
    top: -7px; 
    left: -7px; 
} 

.ui-resizable-ne { 
    top: -7px; 
    right: -7px; 
} 

.ui-resizable-e { 
    top: calc(50% - 7px); 
    right: -7px; 
} 

.ui-resizable-w { 
    top: calc(50% - 7px); 
    left: -7px; 
} 

.ui-resizable-sw { 
    bottom: -7px; 
    left: -7px; 
} 

.ui-resizable-se { 
    right: -7px; 
    bottom: -7px; 
} 

.ui-resizable-se.ui-icon { 
    display: none; 
} 

.ui-rotatable-handle { 
    background-size: 14px; 
    background-repeat: no-repeat; 
    background-position: center; 
    border: 0; 
    border-radius: 50%; 
    background-color: #00CCff; 
    margin-left: calc(50% - 9px); 
    bottom: -5px; 
    width: 18px; 
    height: 18px; 
} 

的JavaScript

$(function() { 
    var inputLocalFont = $("#user_file"); 
    inputLocalFont.change(previewImages); 

    function previewImages() { 
    var fileList = this.files; 
    var anyWindow = window.URL || window.webkitURL; 

    for (var i = 0; i < fileList.length; i++) { 
     var objectUrl = anyWindow.createObjectURL(fileList[i]); 
     var $newDiv = $("<div>", { 
     class: "img-div" 
     }); 
     var $newImg = $("<img>", { 
     src: objectUrl, 
     class: "newly-added" 
     }).appendTo($newDiv); 
     $(".new-multiple").append($newDiv); 
     $newDiv.draggable(); 
     $newDiv.rotatable(); 
     $newDiv.resizable({ 
     aspectRatio: true, 
     handles: "ne, nw, e, se, sw, w" 
     }); 
     $newDiv.find(".ui-icon").removeClass("ui-icon ui-icon-gripsmall-diagonal-se"); 
     window.URL.revokeObjectURL(fileList[i]); 
    } 
    $(".newly-added").on("click", function(e) { 
     $(".newly-added").removeClass("img-selected"); 
     $(this).addClass("img-selected"); 
     e.stopPropagation() 
    }); 

    $(document).on("click", function(e) { 
     if ($(e.target).is(".newly-added") === false) { 
     $(".newly-added").removeClass("img-selected"); 
     } 
    }); 
    } 
}); 

工作實例：https://jsfiddle.net/Twisty/s99kxydw/