Working on a game where you can fly from one city to another. Cities are represented by circles and do have a unique ID. Every trip is recorded in a table.
Now what I want to do is draw a line between two cities to show the travel history.
Is there a function to say (in JS) "draw a line from startX/startY to endX/endY" ?
Not really, you would need to generate an SVG or use a Canvas. There is a trick to draw a line using a border edge, but it also requires code.
Again: Thanks. I've already had a look at your "canvas-fun". There you use "lines" to create the canvas - but I can't even figure out where that element is ...
You could use a library like SVG.js and render the line in an SVG container that way:
Example:
DrawLineSVG.hype.zip (14,4 KB)
Gibt es irgendwas, was Du nicht weißt? 
Thank you very much - I had already given in on that. That's a head start. You are a hero!
Definitiv! Vieles sogar…
Mein "Wissen" ist nur eine kleine Insel im riesigen Ozean des mir Unbekannten.
Download:
DrawLineSVG-mutation.hype.zip (17,5 KB)
One could also just set the innerHTML to a SVG markup to avoid SVG.js. This is pretty small and brute force, and doesn't even care to manipulate an existing SVG (potential optimization here).
Download:
DrawLineSVG-mutation-markup.hype.zip (20,2 KB)
Sorry to molest you again - I added svg.min.js to the header and put a rectangle with class .SVG-container underneath everything - but I get the error "SVG is not defined". Can't add the HYPE here because it heavily depends on Ajax and data from a DB.
Added the functionality (copied from your code) like so:
var parameter={
maid : maid
};
jQuery.ajax({
url : pfad+"weltreise_tourdaten_laden.php",
data: parameter
})
.done(function(response){
var dummy=response.split("|");
if (dummy[0]=="OK") {
// IDs der Städte kommen zurück
var start=dummy[1].split(",");
var ziel=dummy[2].split(",");
var svgElm = element.querySelector('.SVG-container');
var draw = SVG().addTo(svgElm).size(1240, 800);
for (i=0; i<ziel.length; i++) {
var start_coordinates=$("#"+start[i]).offset();
var ziel_coordinates=$("#"+ziel[i]).offset();
var line = draw.line(start_coordinates.left, start_coordinates.top, ziel_coordinates.left, ziel_coordinates.top).move(20, 20);
line.stroke({ color: '#f06', width: 5, linecap: 'round' });
}
}else{
alert(response);
}
})
.fail(function(xhr, status, errorThrown) {
alert("Ajax Fehler.\nStatus="+status+"\nFehler="+errorThrown,"error");
});
SVG undefined sounds like SVG.js is not loaded. Are you using iFrames (widgets) in your document¿ within an iFrame the library may be out of reach ...
btw @MaxZieb provided another approach without the need of svg.js
Thank you for your kind help. You are right about the accessabiity of svg.js - but I don't use any iFrames here. Embedded the script just as Max did.
Anyway: You are absolutely right - I will have to check the other solution - without that script.
Thank you!
The problem is that the code is appereantly on a button and then …
var svgElm = element.querySelector('.SVG-container');
doesn't work. As element isn't the scene… Hence, it needs to be:
var sceneElm = document.getElementById(hypeDocument.currentSceneId());
var svgElm = sceneElm.querySelector('.SVG-container');
That should be the reason for SVG not resolving…
Thanks a bundle, Max. You are my hero and saved my day!
Thanks to Hans-Gerd as well. Have a nice weekend!
