d3.js bir görüntü yeniden boyutlandırma sırasında en boy oranını korumak değil nasıl

Question

Aşağıdaki HTML vardır:

<div id="MainDiv"></div> 

ve Javascript kodu: http://jsfiddle.net/Family/zvrfp3oL/

: Ben de burada bir jsfiddle var

var cursor; 
    var width, height; 
    var testSVG = { 
     x: 0, 
     y: 0, 
     id: 0, 
     image: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Small_Flag_of_the_United_Nations_ZP.svg/488px-Small_Flag_of_the_United_Nations_ZP.svg.png", 
     width: 280, 
     height: 140 
    }; 
    var svgContainer = d3.select("#MainDiv").append("svg").attr({ 
     width: 1920, 
     height: 1080, 
     version: 1.1, 
     xmlns: "http://www.w3.org/2000/svg", 
     viewBox: "-40, -40, 2000, 1160", 
     "class": "GraphicDesigner" 
    }); 

    createSVG(svgContainer, testSVG); 

    function createSVG(container, object) { 
     var d = [{ 
      x: object.x, 
      y: object.y, 
      moveX: object.x, 
      movey: object.y 
     }]; 
     var svgObjectGroup = container.data(d).append("g").attr("transform", function (d) { 
      return "translate(" + d.x + "," + d.y + ")"; 
     }).call(onDragDrop(dragmove, dropHandler)) 
      .attr("id", object.ID).attr("class", "masterTooltip"); 
     svgObjectGroup.append("svg").attr({ 
      width: object.width, 
      height: object.height, 
      viewBox: "0, 0, " + object.width + ", " + object.height 
     }).append("svg:image") 
      .attr({ 
       preserveAspectRatio: "none", 
       width: object.width, 
       height: object.height, 
       "xlink:href": object.image 
      }); 
     var dragSize = 16; 
     svgObjectGroup.append("rect").attr({ 
      x: object.width - dragSize, 
      y: object.height - dragSize, 
      width: dragSize, 
      height: dragSize, 
      rx: 0, 
      fill: "#FFFFFF", 
      stroke: "black", 
      "stroke-width": 1, 
      cursor: "se-resize", 
      "class": "sizers" 
     }); 
    } 

    function onDragDrop(dragHandler, dropHandler) { 
     var drag = d3.behavior.drag(); 
     drag.on("drag", dragHandler).on("dragstart", startHandler).on("dragend", dropHandler); 
     return drag; 
    } 

    function startHandler() { 
     cursor = "se"; 
     d3.event.sourceEvent.stopPropagation(); 
     if (d3.event.sourceEvent.srcElement.attributes.cursor != undefined) cursor = d3.event.sourceEvent.srcElement.attributes.cursor.nodeValue; //Todo. Doesn't work in IE 
    } 

    function dragmove() { 
     if (cursor != null) { 
      if (cursor.startsWith("se")) { 
       //South-East 
       d3.select(this)[0][0].firstChild.height.baseVal.value = d3.select(this)[0][0].firstChild.height.baseVal.value + d3.event.dy; 
       d3.select(this)[0][0].firstChild.width.baseVal.value = d3.select(this)[0][0].firstChild.width.baseVal.value + d3.event.dx; 
      } 
      var sizers = d3.selectAll(".sizers"); 
      sizers.remove(); 
      if (d3.select(this)[0][0].firstChild.height.baseVal.value < 1) d3.select(this)[0][0].firstChild.height.baseVal.value = 1; 
      if (d3.select(this)[0][0].firstChild.width.baseVal.value < 1) d3.select(this)[0][0].firstChild.width.baseVal.value = 1; 
      height = d3.select(this)[0][0].firstChild.height.baseVal.value; 
      width = d3.select(this)[0][0].firstChild.width.baseVal.value; 
     } 
    } 

    function dropHandler() { 
     d3.selectAll("svg").remove(); 
     svgContainer = d3.select("#MainDiv").append("svg").attr({ 
      width: 1920, 
      height: 1080, 
      version: 1.1, 
      xmlns: "http://www.w3.org/2000/svg", 
      viewBox: "-40, -40, 2000, 1160", 
      "class": "GraphicDesigner" 
     }); 
     d3.select(this).style("cursor", "default"); 
     testSVG = { 
      x: 0, 
      y: 0, 
      id: 0, 
      image: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Small_Flag_of_the_United_Nations_ZP.svg/488px-Small_Flag_of_the_United_Nations_ZP.svg.png", 
      width: width, 
      height: height 
     }; 
     createSVG(svgContainer, testSVG); 
    } 

NOT: Bu kod Internet Explorer'da çalışmaz, Chrome, Edge ve Firefox'ta çalışır.

Ben tıklayarak ve sağ alt kutuda sürükleyerek görüntüyü yeniden boyutlandırmak çalışırsanız fare düğmesi serbest bırakıldığında, görüntü doğru boyutlandırmak gelmez. Ancak, sürüklenirken resmi doğru şekilde göstermenin bir yolu var. Görüldüğü gibi, en boy oranını korumaya çalıştığı gibi x ve y koordinatları hareket ediyormuş gibi görünür.

Answer 1

Yeniden boyutlandırırken 'background-size' özelliğini değiştirerek bunu başarabilirsiniz.

İhtiyaç boyutlandırılabilir div içinde kesinlikle konumlandırılmış div oluşturmak ve buna bir sürükle davranışı ekleyin.

İşte bir jsFiddle. Yeniden boyutlandırmak için turuncu dikdörtgeni sürükleyin.

İlgili kod İşte:

var resizable = d3.select('#resizable'); 
var resizer = resizable.select('.resizer'); 

var dragResize = d3.behavior.drag() 
.on('drag', function() {   
    x = d3.mouse(this.parentNode)[0]; 
    y = d3.mouse(this.parentNode)[1]; 

    x = Math.max(50, x); 
    y = Math.max(50, y); 

    resizable 
     .style('background-size', x + 'px' + ' ' + y + 'px') 
     .style('width', x + 'px') 
     .style('height', y + 'px') 
    ; 

    resizer 
     .style('left', x + 'px') 
     .style('top', y + 'px') 
    ; 
}) 

resizer.call(dragResize); 

CSS:

#resizable { 
    position: relative; 
    width: 200px;  
    height: 200px; 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Small_Flag_of_the_United_Nations_ZP.svg/488px-Small_Flag_of_the_United_Nations_ZP.svg.png") ; 
    background-size:cover; 
    background-repeat:no-repeat; 
    // background-position:center; 
} 

#resizable .resizer { 
    position: absolute; 
    width: 10px; 
    height: 10px; 
    bottom: 0; 
    right: -10px; 
    background: orange; 
    opacity: .5; 
    cursor: pointer; 
} 

HTML: Bunun

<div id="resizable"> 
    <div class="resizer"></div> 
</div>