5
我有以下HTML:如何調整在d3.js圖像時不保持縱橫比
<div id="MainDiv"></div>
和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);
}
我這兒也有一個的jsfiddle:http://jsfiddle.net/Family/zvrfp3oL/
注意:此代碼在Internet Explorer中不起作用,它適用於Chrome,Edge和Firefox。
如果我嘗試通過單擊並拖動右下角框來調整圖像大小,當釋放鼠標按鈕時,圖像的大小會正確調整。但是,有沒有一種方法可以正確顯示拖動時的圖像。事實上,當它試圖保持長寬比時,它看起來好像x和y座標正在移動。
感謝。我現在有一些想法。我真的需要在viewBox中發生這種情況,但我不確定這是否可能。 – Family
不確定,但我認爲它會涉及修改視口的寬度/高度和viewBox。本指南可能有助於http://svgpocketguide.com/book/#section-3。還有一篇關於svg擴展的文章https://css-tricks.com/scale-svg/ –