用鼠标拖动、调整大小和旋转

问题描述

我需要能够调整大小、旋转和移动图像。我设法找到了下面的代码，但我需要在图像上有一个旋转点，我可以用它来用鼠标旋转它，或者让滑块随着图像移动。当图像和滑块相距太远时，问题就开始了。如果可能，我希望将滑块作为图像的一部分，以某种方式连接。非常感谢您的帮助。图像是一个量角器，需要移动和旋转它来测量角度。 下面是我的代码

HTML

    <!-- Mockup img downloaded from www.magicmockups.com -->
    <!-- Change the mockup image to any image of your choice in the img tag bellow. -->
    <!-- XXX: WARNING: When the pen is saved,the movable div is RESET to the original 
    position/size/rotation. -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    </div>
    <div style="margin-top: 20px">ROTATION SLIDER:</div>
    <div id="slider" style="display:inline-block; width: 50%; margin: 10px 0 10px1 0px;"> 
    </div>
    <div style="display: inline-block; position: relative;">
    <!-- CHANGE IMG TO YOUR IMG -->
    <div id="movable" >https://link to image</div> 

Javascript

    var currentUnit = "pixels"
    $( function() {
    $("input[type=radio]").checkBoxradio();
    $("#slider").slider({
    min: -360,max: 360,slide: function(event,ui) {
    // Set the slider's correct value for "value".
    $(this).slider('value',ui.value);
    $("#movable").css('transform','rotate(' + ui.value + 'deg)')
    updateText()
    }
    });
    $("#movable").draggable({
    drag: function(event,ui) {
    updateText()
    }
    })
    $("#movable").resizable({
    resize: function(event,ui) {
    updateText()
    }
    })

    // Init the text.
    updateText();
    });

    function getPixelDimensions() {
    precision = 100

    // Save current transform (rotation).
    originalTransform = $("#movable").css('transform')
    // Remove rotation to make sure position() is the CSS position,not the bounding rect 
    position.
    $("#movable").css('transform','rotate(0deg)')
    position = $("#movable").position()
    // Restore rotation.
    $("#movable").css('transform',originalTransform)

    dim = {
    top: Math.round(position.top * precision) / precision,left: Math.round(position.left * precision) / precision,width: Math.round($("#movable")[0].clientWidth * precision) / precision,height: Math.round($("#movable")[0].clientHeight * precision) / precision
    }

    return dim;
    }

    function getPercentageDimensions() {

    }

    function updateText() {
    if(currentUnit == "pixels") {
    dim = getPixelDimensions();
    sufix = "px"
    } else {
    dim = getPercentageDimensions();
    sufix = "%"
    }

    $(".d").remove()
    for(prop in dim) {
    $("#dimensions").append( "<div class='d'>" + prop + ": " + dim[prop] + sufix + "</div>");
    }

    $("#dimensions").append( "<div class='d'>rotate: " + $("#slider").slider("value") + 
    "deg</div>");


    //console.log($("#outer").position().top)


    }

    $('input').change(function() {
    if(this.id == "radio-1") {
    currentUnit = "pixels";
    updateText();
    } else if(this.id.search("radio") != -1){ 
    currentUnit = "percentage";
    updateText();
    }
    })


    function previewFile() {
    var preview = document.querySelector('img'); //selects the query named img
    var file    = document.querySelector('input[type=file]').files[0]; //sames as here
    var reader  = new FileReader();

    reader.onloadend = function () {
    preview.src = reader.result;
    }

    if (file) {
    reader.readAsDataURL(file); //reads the data as a URL
    } else {
    preview.src = "";
    }
    }

CSS

    #movable {
    position: absolute; 
    text-align: center;


    /*Manually change values here.*/
    width: 400px; 
    height: 400px;
    top: 0px; 
    left: 0px;
    transform: rotate(0deg);
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）