Diskuze: Nalezení souřadnic canvas a následná práce s nimi
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
zkousel jsi googlovat nejake examply?
https://mlich.zam.slu.cz/…xample5.html
Neni to uplne nejlepsi, upravoval jsem example., ale v zasade to lze pouzit.
'mouse': function(ev)
{
if (ev.layerX || ev.layerX == 0) // Firefox
{
ev._x = ev.layerX;
ev._y = ev.layerY;
}
else if (ev.offsetX || ev.offsetX == 0) // Opera
{
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call mouse event function selected tool
var tool = canvasXXX.tools.tool;
if (tool && tool[ev.type])
{
tool[ev.type](ev);
}
},Ukladas permanentne souradnice do externiho objektu pri kazdem pohybu a na kliknuti je vyctes z toho objektu. Nebo tu funkci volej v eventu. Ja bych to mozna trochu upravil...
<canvas id=myCanvas></canvas>
<script>
var myApp = {};
myApp.getEventMouseCoord = function (event)
{
if (event.layerX || event.layerY == 0) // modern, Firefox
{
return {x: event.layerX, y: event.layerY};
}
else if (event.offsetX || event.offsetY == 0) // Opera
{
return {x: event.offsetX, y: event.offsetY};
}
return false;
}
myCanvas.selectedTool = null;
myCanvas.drawLine = function(coords)
{
alert(JSON.stringify(coords))
}
myCanvas.selectedTool = myCanvas.drawLine;
myApp.canvas = documentGetElementById('myCanvas')
myApp.canvas.onmouseclick = function (event)
{
if (myApp.selectedTool)
{
myApp.selectedTool( myApp.getEventMouseCoord(event) );
}
}samozrejme tam ma byt vsude myApp. Snad jsem to opravil. Netestoval jsem to.
<canvas id=myCanvas></canvas>
<script>
var myApp = {};
myApp.getEventMouseCoord = function (event)
{
if (event.layerX || event.layerY == 0) // modern, Firefox
{
return {x: event.layerX, y: event.layerY};
}
else if (event.offsetX || event.offsetY == 0) // Opera
{
return {x: event.offsetX, y: event.offsetY};
}
return false;
}
myApp.selectedTool = null;
myApp.drawLine = function(coords)
{
alert(JSON.stringify(coords))
}
myApp.selectedTool = myCanvas.drawLine;
myApp.canvas = documentGetElementById('myCanvas')
myApp.canvas.onmouseclick = function (event)
{
if (myApp.selectedTool)
{
myApp.selectedTool( myApp.getEventMouseCoord(event) );
}
}Tak, a ted to mam i otestovano. Nejake chybicky tam byli, ale na to bys asi prisel. https://jsfiddle.net/az2tpyf6/
<canvas id=myCanvas style="width:200px; height:50px; border:2px solid #f00"></canvas>
<script>
var myApp = {};
myApp.getEventMouseCoord = function(event) {
if (event.layerX || event.layerY == 0) // modern, Firefox
{
return {
x: event.layerX,
y: event.layerY
};
} else if (event.offsetX || event.offsetY == 0) // Opera
{
return {
x: event.offsetX,
y: event.offsetY
};
}
return false;
}
myApp.selectedTool = null;
myApp.drawLine = function(coords) {
alert(JSON.stringify(coords))
}
myApp.selectedTool = myApp.drawLine;
myApp.canvas = document.getElementById('myCanvas')
myApp.canvas.onclick = function(event) {
if (myApp.selectedTool) {
myApp.selectedTool(myApp.getEventMouseCoord(event));
}
}
</script>Jan Novák:21.12.2021 20:46
Moc děkuji za odpověď a za snahu, ale moc z toho rozumnější nejsem... Nemám bohužel takovou úroveň, abych asi pochopil co přesně to dělá... Já jsem to řešil tímto způsobem
<canvas class="myCanvas" style="width:200px; height:200px; border:2px solid #f00"></canvas>
<script>
function writeMessage(canvas, message) {
var kontext = canvas.getContext('2d');
kontext.clearRect(0, 0, canvas.width, 30);
kontext.font = '18pt Calibri';
kontext.fillStyle = 'black';
kontext.fillText(message, 10, 25);
}
function getMousePos(canvas, event) {
var rect = canvas.getBoundingClientRect();
return {
x: event.clientX - rect.left,
y: event.clientY - rect.top
};
}
var canvas = document.getElementsByClassName('myCanvas')[0];
var kontext = canvas.getContext('2d');
canvas.addEventListener('click', function(event)
{
var mousePos = getMousePos(canvas, event);
var message = 'Mouse position: '+"[" + mousePos.x + "; " + mousePos.y+"]";
writeMessage(canvas, message);
},false);
</script>, ale jakmile se s danou souřadnicí snažím pracovat dál, tak mi to stále píše undefined, protože mousePos.x nebo mousePos.y jsou definovány pouze v té funkci...
<!-- https://jsfiddle.net/bcy9tgsa/ -->
<canvas class="myCanvas" style="width:200px; height:200px; border:2px solid #f00"></canvas>
<script>
function getMousePos(event) {
return {
x: event.offsetX,
y: event.offsetY
};
}
function writeMessage(canvas, message) {
kontext.clearRect(0, 0, canvas.width, 30);
kontext.font = '18pt Calibri';
kontext.fillStyle = 'black';
kontext.fillText(message, 10, 25);
}
function MouseClick(event)
{
var mousePos = getMousePos(event);
var message = 'Mouse position: '+"[" + mousePos.x + "; " + mousePos.y+"]";
writeMessage(canvas, message);
}
var canvas = document.getElementsByClassName('myCanvas')[0];
var kontext = canvas.getContext('2d');
canvas.addEventListener('click', MouseClick, false);
</script>Sem to trochu predelal. S tim client a left se nezatezuj, protoze se tam
pridava jeste page-scroll, ktere tam nemas. Pouzij ofsety, ty se vztahuji k
elementu primo.
No, a kde chces s temi koordinaty pracovat. Ve tvem kodu nic takoveho neni, co
vypisuje undefined.
Ale, tam, kde mas ` var kontext =
canvas.getContext('2d');, co ti brani tam mit i `var coords? To
mas vsechno globalni promene. Je to sice strasne neprakticke, kdyz mas milion
radkovy kod, ale kdyz to tam chces mit. Ja radeji pouzivam objektovou strukturu,
jedno globalni superpole. Nebo pouziji primo objektove programovani.
<!-- https://jsfiddle.net/bcy9tgsa/1/ -->
<button class="myButton">tlacitko</button>
<canvas class="myCanvas" style="width:200px; height:200px; border:2px solid #f00"></canvas>
<script>
function classXxx(x, y, canvas)
{
var root = this; // pomocna promena odkazujici na funkci, volim 'root', ale nekdo pouziva 'that'
this.coords = {x:null, y:null};
this.button = null;
this.canvas = null;
this.kontext = null;
this.init = function(x, y, canvas)
{
root.coords = {x: null, y: null};
root.button = document.getElementsByClassName('myButton')[0];
root.button.addEventListener('click', root.buttonMouseClick, false);
root.canvas = canvas;
root.kontext = canvas.getContext('2d');
canvas.addEventListener('click', root.canvasMouseClick, false);
}
this.getMousePos = function (event) {
return {
x: event.offsetX,
y: event.offsetY
};
}
this.writeMessage = function(message) {
var canvas = root.canvas,
kontext = root.kontext;
kontext.clearRect(0, 0, canvas.width, 30);
kontext.font = '18pt Calibri';
kontext.fillStyle = 'black';
kontext.fillText(message, 10, 25);
}
this.canvasMouseClick = function(event)
{
root.coords = root.getMousePos(event); // bez var, ukladam do globalni promenne pro tuto class
var message = 'Mouse position: '+"[" + root.coords.x + "; " + root.coords.y+"]";
root.writeMessage( message);
}
this.buttonMouseClick = function(event)
{
root.button.innerHTML = 'x='+root.coords.x + ' y='+root.coords.y;
}
this.init(x, y, canvas)
}
var yyy = new classXxx(1, 2, document.getElementsByClassName('myCanvas')[0])
yyy.writeMessage(JSON.stringify( yyy.coords ))
yyy.coords = {x: 4, y: 5};
yyy.coords.y = 6;
yyy.writeMessage(JSON.stringify( yyy.coords ))
</script>Vložil jsem zde jen tu část kódu, která měla za úkol hledat souřadnice... Dále bych právě ty souřadnice chtěl použít v iteračním procesu z = z2 + c, kde souřadnice x a y jsou složky komplexního čísla c. Pro jednotlivý útvar tvořící se v druhém canvas vždy ponechám stejné c a počítám pro všechny body (pixely) z plánu...Tímto procesem rozhoduji, zda bod z plánu diverguje, nebo ne a podle toho ho buď obarvím na černo, nebo na bílo...
No, a takovy kod tam nemas. Takze mas jiny kod, ktery tobe pise undefined a
nam ne, nic nepise. Takze, problem je nekde u tebe.
Jak uz jsem rikal, nepouzivej lokalni promenou, definuj ji jako globalni. Cili,
to var pouzij venku.
var mousePos;
canvas.addEventListener('click', function(event)
{
// var mousePos = getMousePos(canvas, event);
var mousePos = getMousePos(canvas, event);
//...
}\---
Ale, lepsi by bylo to zrovna prevest do jednoho objektu {} nebo function()+new, protoze oddelist ten kod od nejakeho dalsiho js, ktere budes dopisovat pro neco jineho. A kdybys to pojmenoval stejne, tak js kod se prepisuje a ani ti to nesdeli.
x = 123
x = 456
function y () {return 123}
function y () {return 1+2+3}
function y () {return 4}
z = function () {return 123}
z = function () {return 1+2+3}
z = function () {return 4}Zobrazeno 9 zpráv z 9.