के साथ ड्राइंग लाइन्स मैं माउस आंदोलन के आधार पर लाइनों को आकर्षित करने के लिए किनेक्टजेएस का उपयोग कर रहा हूं। जब कोई उपयोगकर्ता माउस बटन दबाता है, तो मैं चाहता हूं कि यह लाइन का 'प्रारंभ' बिंदु हो, और जब उपयोगकर्ता रिलीज़ हो जाए, तो यह लाइन का 'अंत' होगा, लेकिन जैसा कि वे माउस को नीचे रखते हैं, मैं चाहता हूं मेरे माउस चाल के रूप में लाइन को गतिशील रूप से फिर से चलाने में सक्षम होने के लिए। क्या यह संभव है?किनेटिकजेएस - माउस
हां, यह संभव है।
मूल रूप से, आपकोMouseMove ईवेंट के दौरान अपनी परत को फिर से निकालना होगा। जब लाइन चलती है या नहीं, तो आपको नियंत्रित करने के लिए आपको ध्वज की आवश्यकता होगी।
जब स्क्रिप्ट प्रारंभ होती है, तो यह झंडा झूठा होना चाहिए।
ऑनसाउसडाउन पर, लाइन शुरू करने से वर्तमान माउस निर्देशांक प्राप्त हो और ध्वज को सही पर सेट करना चाहिए।
ऑनसाउसमोव पर, अगर ध्वज सत्य है, तो आपको वर्तमान माउस निर्देशांक प्राप्त करने के लिए लाइन अंत को अपडेट करना चाहिए।
ऑनउसउसअप पर, ध्वज को गलत पर सेट किया जाना चाहिए।
देखें नीचे दिए गए उदाहरण:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.1.js"></script>
<script>
window.onload = function() {
layer = new Kinetic.Layer();
stage = new Kinetic.Stage({
container: "container",
width: 320,
height: 320
});
background = new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: "white"
});
line = new Kinetic.Line({
points: [0, 0, 50, 50],
stroke: "red"
});
layer.add(background);
layer.add(line);
stage.add(layer);
moving = false;
stage.on("mousedown", function(){
if (moving){
moving = false;layer.draw();
} else {
var mousePos = stage.getMousePosition();
//start point and end point are the same
line.getPoints()[0].x = mousePos.x;
line.getPoints()[0].y = mousePos.y;
line.getPoints()[1].x = mousePos.x;
line.getPoints()[1].y = mousePos.y;
moving = true;
layer.drawScene();
}
});
stage.on("mousemove", function(){
if (moving) {
var mousePos = stage.getMousePosition();
var x = mousePos.x;
var y = mousePos.y;
line.getPoints()[1].x = mousePos.x;
line.getPoints()[1].y = mousePos.y;
moving = true;
layer.drawScene();
}
});
stage.on("mouseup", function(){
moving = false;
});
};
</script>
</head>
<body>
<div id="container" ></div>
</body>
</html>
कई पंक्तियों आकर्षित करने के लिए एक तरह से और एक ही पंक्ति की जगह नहीं है? – Mike
@ ट्रस्टवेब यकीन है कि यह है। बस प्रत्येक mousedown –
पर एक नया आकार बनाएं सुविधा के लिए उत्तर का एक JSFiddle यहां है: http://jsfiddle.net/nSSTS/ –