एचटीएमएल 5 कैनवास बेजियर पथ आकार का पता लगाने पर क्लिक कर रहा है

मेरे पास कुछ अनियमित आकृति चित्रों के साथ एक कैनवास है, और जब कोई किसी विशिष्ट व्यक्ति पर क्लिक करता है तो मैं एक प्रतिक्रिया प्राप्त करना चाहता हूं?एचटीएमएल 5 कैनवास बेजियर पथ आकार का पता लगाने पर क्लिक कर रहा है

मैं इसके लिए हर जगह देख रहा हूं और केवल आयताकार के लिए समाधान ढूंढ चुके हैं।

मुझे लगता है कि इसे isPointInPath() के साथ करना पड़ सकता है, लेकिन मुझे अभी तक इसका उपयोग करने के बारे में एक संक्षिप्त स्पष्टीकरण नहीं मिला है।

कोई भी सहायता आपका स्वागत है।

स्रोत

2010-08-19 Brousselaine

मैंने एक ट्यूटोरियल बनाया जो ऑब्जेक्ट पिकिंग/हिट परीक्षण करने के लिए दूसरे अदृश्य कैनवास का उपयोग करता है। अपने सभी आकृतियों को एक-एक करके, दूसरे कैनवास पर खींचे, जब तक कि उनमें से एक का काला पिक्सेल न हो जहां माउस का स्थान होता है। फिर आपको अपना ऑब्जेक्ट मिला है!

// gctx is ghost context, made from the second canvas 
    // clear(gctx) 

    // ... 

    // run through all the boxes 
    var l = boxes.length; 
    for (var i = l-1; i >= 0; i--) { 
    // draw shape onto ghost context 
    drawshape(gctx, boxes[i], 'black', 'black'); 

    // get image data at the mouse x,y pixel 
    var imageData = gctx.getImageData(mx, my, 1, 1); 
    var index = (mx + my * imageData.width) * 4; 

    // if the mouse pixel exists, select and break 
    if (imageData.data[3] > 0) { 
     mySel = boxes[i]; 
     offsetx = mx - mySel.x; 
     offsety = my - mySel.y; 
     mySel.x = mx - offsetx; 
     mySel.y = my - offsety; 
     isDrag = true; 
     canvas.onmousemove = myMove; 
     invalidate(); 
     clear(gctx); 
     return; 
    } 

    }

मेरा पूरा डेमो केवल आयतों का उपयोग करता है, लेकिन बाद के संस्करण में मैं हलकों/पथ/पाठ का उपयोग करेगा:

यहाँ ट्यूटोरियल मैं कैनवास के साथ वस्तुओं का चयन करने पर लिखा से एक सा है।

यदि आप डेमो और मेरा पूरा कोड देखना चाहते हैं तो यह here है।

स्रोत

2010-08-23 15:27:33

धन्यवाद। मैंने अंत में कुछ ऐसा ही किया, हालांकि मैं सहेजने वाले कैनवास पर रहा, आकारों को फिर से भरने के दौरान कोई स्ट्रोक नहीं कर रहा था या भरता था। – Brousselaine

@ सिमॉन सरिस मैंने इसे बनाने के लिए आपके ट्यूटोरियल का उपयोग किया है: http://edumax.org.ro/extra/new/mindmap/ (मानचित्र के रूप में ग्रिड का उपयोग करें और मेनू के लिए राइट क्लिक करें) मैं पथ का उपयोग करके चुनने योग्य बनाने की कोशिश कर रहा हूं आपकी विधि मैं समझता हूं कि इस आने पर आपके पास एक ट्यूटोरियल है लेकिन क्या कोई तरीका है जिससे आप हमें कुछ बुनियादी कदमों पर संकेत दे सकते हैं? (विशेष रूप से पथ के लिए .contains() फ़ंक्शन) –

क्षमा करें, लगभग सभी मेरा खाली समय अभी एक पुस्तक लिखने में बिताया गया है, मैं शायद इस साल के अंत में अपने वेब ट्यूटोरियल श्रृंखला में वापस आ जाऊंगा। चुनिंदा मार्ग बनाना संदर्भ के 'isPointInPath' फ़ंक्शन के साथ किया जा सकता है लेकिन आपको प्रत्येक पथ बनाने के लिए आवश्यक सभी चरणों को सहेजना होगा और जब भी आपको परीक्षण करने की आवश्यकता हो, संदर्भ के वर्तमान पथ को लोड करना होगा। –

आप एक पथदर्शी का उपयोग कर सकते हैं, जो सभी आकृतियों को अनुमानित बहुभुज में बदल देता है। फिर पॉलीगॉन में एक बिंदु 'एल्गोरिदम का उपयोग करें ताकि यह जांच सके कि बिंदु आकार में है या नहीं।

स्रोत

2012-05-17 01:09:44

इसे पथ 2 डी का उपयोग करके प्राप्त किया जा सकता है।

var div = document.getElementById("result"); 
 
var canvas = document.getElementById("canvas"); 
 

 
var ctx = canvas.getContext("2d"); 
 

 
var path1 = new Path2D(); 
 
path1.rect(10, 10, 100, 100); 
 
path1.closePath(); 
 
ctx.stroke(path1); 
 

 
var path2 = new Path2D(); 
 
path2.moveTo(220, 60); 
 
path2.arc(170, 60, 50, 0, 2 * Math.PI); 
 
path2.closePath(); 
 
ctx.stroke(path2); 
 

 
var path3 = new Path2D("M230 10 h 80 v 80 h -80 Z"); 
 
ctx.fill(path3); 
 
path3.closePath(); 
 

 
$('canvas').click(function(event) 
 
{ 
 
    div.innerHTML = ""; 
 
    
 
    var x = event.pageX; 
 
    var y = event.pageY; 
 

 
    if (ctx.isPointInPath(path1, x, y)) 
 
    div.innerHTML = "Path1 clicked"; 
 

 
    if (ctx.isPointInPath(path2, x, y)) 
 
    div.innerHTML = "Path2 clicked"; 
 
    
 
    if (ctx.isPointInPath(path3, x, y)) 
 
    div.innerHTML = "Path3 clicked"; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <canvas id="canvas"></canvas> 
 
    <div id="result"></div> 
 
</body>

स्रोत

2015-08-23 21:06:09 Ako

एचटीएमएल 5 कैनवास बेजियर पथ आकार का पता लगाने पर क्लिक कर रहा है

उत्तर

संबंधित मुद्दे