Jak nie zachować proporcje podczas zmiany rozmiaru obrazu w d3.js

Question

Mam następujące HTML:

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

i kod JavaScript:

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); 
    } 

Mam też jsfiddle tutaj: http://jsfiddle.net/Family/zvrfp3oL/

UWAGA: Ten kod nie działa w przeglądarce Internet Explorer, działa w przeglądarce Chrome, Edge i Firefox.

Jeśli spróbuję zmienić rozmiar obrazu, klikając i przeciągając w prawym dolnym polu, obraz zmienia rozmiar poprawnie po zwolnieniu przycisku myszy. Ale czy istnieje sposób, aby prawidłowo pokazać obraz podczas jego przeciągania. W obecnej postaci, gdy próbuje zachować proporcje, wygląda na to, że współrzędne X i Y są w ruchu.

Answer 1

Można to osiągnąć, zmieniając właściwość "rozmiar tła" podczas zmiany rozmiaru.

Musisz utworzyć bezwzględnie umieszczony element div wewnątrz rozmiaru elementu div z możliwością zmiany rozmiaru i dodać do niego zachowanie przeciągania. Jest to jsFiddle. Przeciągnij pomarańczowy prostokąt, aby zmienić rozmiar.

Oto odpowiedni kod:

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:

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