Hogy tudom ezeket tömbbe rakni javascript-tel?
Készítettem egy canvas-t és azon szeretnék rajzolni.
Berajzolom az alakzatokat és ezeket szeretném tömbbe rakni, hogy később hivatkozni tudjak rájuk.
Van erre lehetőség?
Ha nincs akkor hogy tudom megcsinálni azt, hogy, ha belekattintok egy alakzatba akkor az alakzaton belüli rész színeződjön ki?
Ha csak egy alakzat van akkor megy, de ha már több akkor is csak egyet színez be, ezért akarom tömbbe rakni őket, hogy így külön-külön működjön a dolog.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = 924;
c.height = 1017;
function baseTable() {
for(var x = 0; x < 10; x += 50)
ctx.beginPath();
ctx.moveTo(x, 50);
ctx.lineTo(x+50, 50);
ctx.lineTo(x+50, 150);
ctx.lineTo(x, 150);
ctx.closePath();
ctx.strokeStyle="#999";
ctx.stroke();
ctx.fillStyle = "#fff";
ctx.fill();
}
}
$(document).ready(function() {
baseTable();
});
Itt 10 négyszög rajzolódik ki és ezeket szeretném tömbbe rakni.
válasza:A canvasban nincsenek "DOM elementek" amikre később hivatkozni tudsz.
Amit csinálni lehet az az, hogy minden kirajzolt téglalapnak elmented a paramétereit mondjuk egy objektumba, ezekből az objektumokból csinálsz egy tömböt.
Utána írsz egy függvényt, ami argumentumként kap egyet a fenti objektumaid közül, és megmondja, hogy a klikkelésed koordinátái a téglalapon belülre vagy azon kívülre estek.
Ezek után az Array.prototype.filter(fenti fuggveny) meg fogja neked mondani, hogy hova, melyik téglalapra klikkeltél. Ez alapján megváltoztathatod a színét. Az gondolom vili, hogy ez után az egész canvast újra kell rajzolni.
válasza:Nem biztos, hogy a filter a legjobb ide.
Nézz körül itt: (saját :) )
és próbálkozz valami ilyesmivel
rect = {
x1:
y1:
x2:
y2:
...
strokecolor:
fillcolor:
}
rectangles = [{}, {}, {}, ...]
var drawRectangle = function(obj) {
ctx.save()
ctx.beginpath()
moveTo
lineTo
lineTo
....
strokeStyle
fillStlyle
stroke
fill
restore
}
var drawCanvas = function(rectangles) {
rectalngles.forEach(drawRectangle)
}
var isClickInside = function(clickevent, rectobject) {
if (.....) return true
else return false
}
var clickHandler = function() {
var newRectangles = rectangles.map(function(rect){
if (isClickInside(...)) rect.fillStlye="blue"
return rect
})
drawCanvas(newRectangles)
}
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!