मैं माउस के साथ गतिशील रूप से एक एसवीजी बहुभुज का आकार बदलने और खींचने के लिए एक रास्ता खोजने के लिए संघर्ष कर रहा हूं। दुर्भाग्य से jQueryUi svg तत्वों के लिए काम नहीं करता है। मैंने राफेल लाइब्रेरी की भी जांच की, लेकिन इसका एहसास करने के तरीके पर कोई दस्तावेज/स्निपेट नहीं मिला।एसवीजी बहुभुज का आकार बदलना और खींचना गतिशील रूप से
एसवीजी का उपयोग करने के अलावा, क्या एक बहुभुज ग्राफिक गतिशील रूप से आकार बदलने और खींचने का कोई अन्य तरीका है?
आप स्वयं एसवीजी तत्वों के साथ काम कर सकते हैं। विशेष रूप से, आप बहुभुज के बिंदु पा सकते हैं और HTML-element हैंडल जोड़ सकते हैं जिन्हें jQuery के साथ खींचने योग्य बनाया जाता है। (मुझे लगता है कि आपके पास यह समस्या है कि jQuery यूआई एसवीजी पोजिशनिंग मॉडल के साथ काम नहीं करता है।) यहां एक पूरा उदाहरण है जिसे मैंने अभी लिखा है (सफारी 5 और फ़ायरफ़ॉक्स 9 में परीक्षण किया गया है)।
(अस्वीकरण:। मैं jQuery का एक नियमित उपयोगकर्ता नहीं हूँ, इस कोड को सब कुछ के लिए jQuery का उपयोग नहीं के अलावा मायनों में unidiomatic हो सकता है)
<!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>तुम भी एक घटना देते हैं सकता है एसवीजी पॉलीगॉन के हैंडलर और ड्रैगिंग लागू करें (मैंने परीक्षण किया और यह काम कर सकता है), लेकिन फिर आपको बहुभुज की वर्तमान सीमाओं के अंदर क्लिक करना होगा, जो एक अटूट यूआई और संभवतः मुश्किल है, और अपने हिट परीक्षण को लागू करें।
इसके लिए, आप पॉलीगॉन तत्व में onmousedown हैंडलर जोड़ देंगे। फिर अपने अंक पुनर्प्राप्त करें, क्लिक करें जो कि क्लिक स्थिति की सीमा में है, प्रारंभिक माउस स्थिति संग्रहीत करें, और फिर onmousemove हैंडलर x और y बिंदु के रूप में माउस स्थिति में परिवर्तन के रूप में संशोधित करें।
धन्यवाद एक टन! मैं ड्रैगिंग पर काम कर रहा हूं - सीमाओं के अंदर क्लिक करना वही है जो मैं चाहता हूं। इसके अलावा मैं इन बहुभुजों को svg-text के साथ लेबल करने की कोशिश कर रहा हूं, लेकिन मुझे यह नहीं पता था कि बहुभुज का आकार बदलते समय टेक्स्ट स्थिति को कैसे अपडेट किया जाए। क्या आप कोई इशारा दे सकते हैं ?? – user1159545
निश्चित रूप से, मैंने एक संकेत जोड़ा। दुर्भाग्यवश मैंने पहले लिखा था कोड को नहीं बचाया। –
अरे, मुझे समस्या का सामना करना पड़ रहा है, कि मुझे बहुभुज के अद्यतन निर्देशांक की आवश्यकता है क्योंकि मैं इसका आकार बदल रहा हूं। जब मैं फायरबग के साथ एक आकार का बहुभुज तत्व का निरीक्षण करता हूं, तब भी इसमें पुराने अंक हैं, हालांकि इसका आकार बदल गया था। कुछ पता है इसे कैसे हल करना है? – user1159545