Hi there,
I´m using <canvas> dhtml tag for drawing some lines . The problem is that I generate them in a loop and then I want to draw, but nothing is happening... the coordinates of the canvas are (0,0) always?? or when a canvas is generated it gets global coordinates and so I have to try catch them another way?
Thanks for your time
8 1767
Can you post your code?
See if this link helps.
Can you post your code?
See if this link helps.
Hi acoder,
Everything I did so far I learnt on that page! :D
I have worked out that the coordinates do not start in (0,0) but they gain the global coordinates of the document. The problem now is that I´m getting the coordinates, drawing, but can´t move the cursor where I want. For ex, I want to draw from a start position to a finish position, positionate myslf in another start point and draw a line to another finish point, and so on... I use the moveTo function as they say in that tutorial, but ain´t workin´... this question is not the original thing I wanted to know, but I managed to solve it and I have this one now...
Here is the code : -
function drawLinks()
-
{
-
("dropZone").getElementsByTagName("div");
-
-
for (var i = 0; i < oProcess.length ; i++)
-
{
-
var el = oProcess[i].procCode;
-
var currentX = getProcessPositionX(el);
-
// alert("CProc X " + i+1 + ": " + currentX);
-
var currentY = getProcessPositionY(el);
-
// alert("CProc Y " + i+1 + ": " + currentY);
-
-
for (j = 0; j < oProcess[i].procFinish.length ; j++)
-
{
-
var nextEl = oProcess[i].procFinish[j];
-
var nextX = getProcessPositionX(nextEl);
-
// alert("NProc X " + (i+1) + ": " + nextX);
-
var nextY = getProcessPositionY(nextEl);
-
// alert("NProc Y " + (i+1) + ": " + nextY);
-
-
-
var newCanvas = document.createElement('canvas');
-
newCanvas.setAttribute('class', "canvasClass");
-
-
var dz = document.getElementById("dropZone");
-
dz.appendChild(newCanvas);
-
-
var el = Dom.get(newCanvas);
-
dd = new YAHOO.util.DD(el);
-
alert("Canvas coordinates: " + getProcessPositionXY(el));
-
-
// Make sure we don't execute when canvas isn't supported
-
if (newCanvas.getContext){
-
// use getContext to use the canvas for drawing
-
var ctx = newCanvas.getContext('2d');
-
-
-
// ctx.beginPath();
-
ctx.strokeStyle = 'black';
-
ctx.moveTo(currentX,currentY);
-
ctx.lineTo(nextX,nextY);
-
-
ctx.stroke();
-
-
// ctx.closePath();
-
}
-
else {
-
alert("Your browser does NOT support this page!");
-
}
-
}
-
}
-
-
-
alert("I´m done!");
-
}
-
-
just ignore line 3, I forgot to erase it when I pasted the code here
Can you get the simple examples to work?
Can you get the simple examples to work?
Not quite... or better, I can make them work, but they don´t quite do what´s anounced... for example, I created a canvas with 100px width and 100px hight. As they use in the tutorial, I moved the cursor to (0,0) , using moveTo(0,0) and then drew a lineTo(100,100) . Because lineTo receives just the target coordinates of the line, this should draw a perfect diagonal across my canvas, but it doesn´t!!! if you just try these several lines lines I´m posting , you can see for yourself...
I don´t know what the problem can be, but it´s just what I´m needing for completing my task of connecting entities like in an entity-relashionship model... -
-
<canvas id="test" style="width: 100px; height: 100px; border: solid 2px black; ">
-
</canvas>
-
-
<script type="text/javascript">
-
function xxx()
-
{
-
// get the canvas element using the DOM
-
var canvas = document.getElementById('test');
-
-
// Make sure we don't execute when canvas isn't supported
-
if (canvas.getContext){
-
-
// use getContext to use the canvas for drawing
-
var ctx = canvas.getContext('2d');
-
-
ctx.beginPath();
-
ctx.moveTo(0,0);
-
ctx.lineTo(100,100);
-
ctx.closePath();
-
ctx.stroke();
-
}
-
}
-
</script>
-
-
I tried with and without the begin-closePath function, but the result is the same...
Thanks for your help
If you use it as:
[HTML]<canvas id="test" width="100" height="100" style="border: solid 2px black; "></canvas>
[/HTML]it seems to work as expected.
yes indeed!!!!! thank you very much, problem solved ;D
you rock!!
You're welcome.
Glad you got it working.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Mickel Grönroos |
last post by:
Hi,
I have a Tkinter.Canvas of variable width. Is there a standard way of
asking the canvas which parts of it that is visible? I.e. on the
horizontal scale, I would like to know at what fraction...
|
by: Suresh Kumar |
last post by:
Hi,
In Tkinter, how to convert canvas coordinates to window
coordinates? To convert window coordinates to canvas coordinates
we are using "canvasx,canvasy". But how to do vice-versa? Iam
using a...
|
by: Suresh Kumar |
last post by:
Hi,
In Tkinter, how to convert canvas coordinates to window
coordinates? To convert window coordinates to canvas coordinates
we are using "canvasx,canvasy". But how to do vice-versa?
With...
|
by: Marc |
last post by:
Hi all,
I've been using the canvas quite a bit lately, and I am wondering if I
am just missing a quick trick somewhere.
With most canvas objects you can bind then to mouse functions and...
|
by: Shi Mu |
last post by:
got confused by x, y coordinates in Tkinter canvas.
from left to right, does X increase?
from top to bottom, does y increase?
|
by: Timo |
last post by:
An intranet app I'm developing in asp.net uses a tabs metaphor for the UI.
Each tab pane consists of a Panel webcontrol and at runtime, clicking on a
tab causes its corresponding panel to relocate...
|
by: WaterWalk |
last post by:
Hello. When I tried to make Tkinter canvas widget respond to
MouseWheel event on Windows XP, I failed. The canvas just doesn't
receive MouseWheel event. I used bind_all to find out which widget...
|
by: Gigs_ |
last post by:
how to write text on canvas. i know that i need to use canvas.create_text, but
how to write text than when i create_text?
or how to access object ID in canvas and change some options?
thanks...
|
by: skanemupp |
last post by:
so i load a gif onto a canvas and when i click the canvs i want to get
the color of the pixel that is clicked.
so i need to ge the object im clicking.
i was told in another thread to use...
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: ryjfgjl |
last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |