Jquery JRAC獲取座標

Question

我一直在嘗試2個小時，但我找不到一種方式來獲得座標 一旦我已經決定了裁剪的寬度和高度。 JRAC的文檔也不好。 有沒有人遇到寬度，高度，x，y的值？

Answer 1

您可以使用jrac同樣具有例如，從文件 我只是添加jrac，並與多jQuery插件比較，因爲jrac可以移動圖像區域和那些jQuery插件不能

jQuery的

$('.imageArea img').jrac({ 
        'crop_width': parseInt(Math.round(cusW/4) + 4), 
        'crop_height': parseInt(Math.round(cusH/4) + 4), 
        'crop_left': 0, 
        'crop_top': 0, 
        'zoom_min': 0, 
        'zoom_max': 0, 
        'zoom_label': '', 
        'viewport_onload': function() { 
         $viewport = this; 
         var inputs = $("div.coords").find("input[type=text]"); 
         var events = ['jrac_crop_x', 'jrac_crop_y', 'jrac_crop_width', 'jrac_crop_height', 'jrac_image_width', 'jrac_image_height']; 

         for (var i = 0; i < events.length; i++) { 
          var event_name = events[i]; 
          // Register an event with an element. 
          $viewport.observator.register(event_name, inputs.eq(i)); 
          // Attach a handler to that event for the element. 
          inputs.eq(i).bind(event_name, function (event, $viewport, value) { 
           $(this).val(value); 
          }) 
          // Attach a handler for the built-in jQuery change event, handler 
          // which read user input and apply it to relevent viewport object. 
          .change(event_name, function (event) { 
           var event_name = event.data; 
           $viewport.$image.scale_proportion_locked = $("div.coords").find("input[type=checkbox]").is(':checked'); 
           $viewport.observator.set_property(event_name, $(this).val()); 
          }) 
         } 
        } 
       }) 
       // React on all viewport events. 
       .bind('jrac_events', function (event, $viewport) { 
        //Check Image Crop Box Valid 
        if (parseInt($("#cropX").val()) > -1 && parseInt($("#cropY").val()) > -1) { 
         //Set Background 
         $("#cropW").css('background-color', 'chartreuse'); 
         $("#cropH").css('background-color', 'chartreuse'); 
        } else { 
         //Set Background 
         $("#cropW").css('background-color', 'salmon'); 
         $("#cropH").css('background-color', 'salmon'); 
        } 
       }); 

HTML

<div class="coords"> 
        <input id="cropX" type="text" value="" style="display: none;" /> 
        <input id="cropY" type="text" value="" style="display: none;" /> 
        <input id="cropW" type="text" value="" style="display: none;" /> 
        <input id="cropH" type="text" value="" style="display: none;" /> 
        <input type="checkbox" checked="checked" style="display: none;" /> 
       </div>