Tôi đang cố gắng tìm cách thay đổi kích thước và kéo một đa giác svg động bằng chuột. Thật không may jQueryUi không làm việc cho các yếu tố svg. Tôi cũng đã kiểm tra thư viện Raphael nhưng không thể tìm thấy bất kỳ tài liệu/đoạn trích nào về cách nhận ra điều này.Thay đổi kích thước và kéo các đa giác SVG động
Ngoài việc sử dụng SVG, có cách nào khác để thay đổi kích thước và kéo hình ảnh động đa giác không?
Bạn có thể tự làm việc với các phần tử SVG. Đặc biệt, bạn có thể tìm thấy các điểm của đa giác và thêm các phần tử xử lý phần tử HTML được tạo bằng jQuery. (Tôi giả định rằng vấn đề bạn gặp phải là giao diện người dùng jQuery không hoạt động với mô hình định vị SVG.) Đây là một ví dụ hoàn chỉnh mà tôi vừa viết (được thử nghiệm trong Safari 5 và Firefox 9).
(Disclaimer:. Tôi không phải là một người sử dụng thường xuyên của jQuery; mã này có thể unidiomatic theo những cách bên cạnh việc không sử dụng jQuery cho tất cả mọi thứ)
<!DOCTYPE html>
<html><head>
<title>untitled</title>
<style type="text/css" media="screen">
.handle {
position: absolute;
border: 0.1em solid black;
width: 1em;
height: 1em;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
function draggablePolygon(polygon) {
var points = polygon.points;
var svgRoot = $(polygon).closest("svg");
for (var i = 0; i < points.numberOfItems; i++) {
(function (i) { // close over variables for drag call back
var point = points.getItem(i);
var handle = document.createElement("div");
handle.className = "handle";
document.body.appendChild(handle);
var base = svgRoot.position();
// center handles over polygon
var cs = window.getComputedStyle(handle, null);
base.left -= (parseInt(cs.width) + parseInt(cs.borderLeftWidth) + parseInt(cs.borderRightWidth))/2;
base.top -= (parseInt(cs.height) + parseInt(cs.borderTopWidth) + parseInt(cs.borderBottomWidth))/2;
handle.style.left = base.left + point.x + "px";
handle.style.top = base.top + point.y + "px";
$(handle).draggable({
drag: function (event) {
setTimeout(function() { // jQuery apparently calls this *before* setting position, so defer
point.x = parseInt(handle.style.left) - base.left;
point.y = parseInt(handle.style.top) - base.top;
},0);
}
});
}(i));
}
}
</script>
</head><body>
<p>
(Offset to test)
<svg id="theSVG" width="500" height="500" style="border: 2px inset #CCC;">
<polygon id="x" points="200,200 100,100 100,1" fill="green" />
<polygon id="y" points="200,200 100,100 1,100" fill="red" />
</svg>
</p>
<script type="text/javascript">
draggablePolygon(document.getElementById("x"));
draggablePolygon(document.getElementById("y"));
</script>
</body></html>Bạn cũng có thể đính kèm một sự kiện xử lý đối với đa giác SVG và thực hiện kéo (tôi đã thử nghiệm và điều này có thể hoạt động), nhưng sau đó bạn sẽ phải nhấp vào bên trong ranh giới hiện tại của đa giác, đó là giao diện người dùng không điển hình và có thể khéo léo và thực hiện thử nghiệm hit của riêng bạn.
Đối với điều này, bạn sẽ thêm trình xử lý onmousedown vào phần tử đa giác. Sau đó, lấy điểm của nó, tìm trong phạm vi vị trí nhấp chuột, lưu trữ vị trí chuột ban đầu và sau đó có trình xử lý onmousemove sửa đổi x và y của điểm khi vị trí chuột thay đổi.
Cảm ơn một tấn! Tôi đang làm việc trên kéo-nhấp vào bên trong ranh giới là chính xác những gì tôi muốn. Ngoài ra tôi đang cố gắn nhãn các đa giác này với văn bản svg, nhưng tôi đã không tìm ra cách cập nhật vị trí văn bản, trong khi thay đổi kích thước đa giác. Bạn có thể đưa ra gợi ý nào không ?? – user1159545
Chắc chắn, tôi đã thêm một gợi ý. Thật không may tôi đã không lưu mã tôi đã viết đầu tiên. –
Hey, tôi đang đối mặt với vấn đề, rằng tôi cần các tọa độ cập nhật của đa giác khi tôi đang thay đổi kích thước nó. Khi tôi kiểm tra một phần tử đa giác đã được thay đổi kích thước bằng firebug, nó vẫn có các điểm cũ trong đó, mặc dù nó đã được thay đổi kích cỡ. Bất kỳ ý tưởng làm thế nào để giải quyết điều này? – user1159545