Làm thế nào để không duy trì tỉ lệ khi thay đổi kích thước một hình ảnh trong d3.js

Question

Tôi có HTML sau:

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

và mã 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); 
    } 

Tôi cũng có một jsfiddle đây: http://jsfiddle.net/Family/zvrfp3oL/

LƯU Ý: Mã này không hoạt động trong Internet Explorer, nó hoạt động trong Chrome, Edge và Firefox.

Nếu tôi cố gắng thay đổi kích thước hình ảnh bằng cách nhấp và kéo trong hộp bên phải phía dưới, hình ảnh sẽ thay đổi kích thước chính xác khi nút chuột được nhả ra. Nhưng, có cách nào để hiển thị chính xác hình ảnh trong khi nó đang được kéo. Vì nó là, vì nó cố gắng để bảo tồn tỷ lệ khía cạnh nó trông như thể các tọa độ x và y đang di chuyển.

Answer 1

Bạn có thể đạt được điều này bằng cách thay đổi thuộc tính 'nền-kích thước' khi thay đổi kích thước.

Cần tạo div hoàn toàn được định vị bên trong div có thể thay đổi kích thước và thêm hành vi kéo vào đó.

Đây là jsFiddle. Kéo hình chữ nhật màu cam để thay đổi kích thước.

Dưới đây là các mã có liên quan:

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>