我有以下的HTML代码:
<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坐标正在移动。