Html5, canvas και επεκταση αυτου στο θεωρητικα απειρο

[zaranero]

Φτιαχνω ενα canvas στην html5 ας πουμε 500x500.

Εχει ενα πλεγμα απο τετραγωνα για να βοηθαει τον χρηστη και στα ορια του canvas στις συντεταγμενες x και ψ ειναι το 500 ,500. (που φαινεται και απο δυο αριθμους 500,500)


Θελω ο χρηστης να δινει συντεταγμενες και με αυτο το τροπο ας πουμε να σχεδιαζει ενα τριγωνο και με αυτο να κανει διαφορες διεργασιες το προγραμμα.

Δεν θελω ομως να καθορισω αυστηρα ορια στην αριθμηση ωστε να χωρανε ολα τα αποτελεσματα στο 500x500 canvas.

Ας πουμε δλδ οτι ο χρηστης λεει πηγαινε στις συντεταγμενες 1000, 1000 και σχεδιασε εκει. (εξω απο τα ορια του 500χ500)



Για να δει την σχεδιαση η λυση ειναι να "σερνει-drag&drop" με το ποντικι το canvas και να πηγαινει στο 1000χ1000 και να βλεπει το τριγωνο. Οι δυο αριθμοι 500,500 θα αλλαζουν καθως θα σερνει ο χρηστης την επιφανεια , αναλογα ποσο την εχει συρει προς


τις επιθυμητες συντεταγμενες ωστε να τον βοηθαει να εντοπισει που επιτελους εχει σχεδιαστει το τριγωνο βασει των δεδομενων που εχει δωσει.

Ετσι τουλαχιστον εχω φανταστει την λυση σε αυτο το προβλημα.

Πως μπορω να το επιτυχω αυτο? Δεν χρειαζομαι απαραιτητα ολοκληρωμενη λυση , ακομα και κατευθυνσεις προς την σωστη πορεια ειναι καλοδεχουμενες.

Ευχαριστω.

- - - Updated - - -

There is no way to render something beyond the bounds of the canvas then "scroll" it into the view, the canvas has no concept of that.

Μαλλον δεν γινεται αυτο που εχω στο μυαλο , αλλα σκεφτομαι τα παιχνιδια πχ με scrolling που πας απο πιστα σε πιστα δλδ ενας ανθρωπος περπαταει και καθως περπαταει ξεδιπλωνεται η επομενη πιστα με ομαλο τροπο......... χμμμμμ ειναι κατι που θα το ψαξω. Ειμαι δεκτος σε προτασεις για εναλλακτικες ιδεες σε αυτο που περιεγραψα στο αρχικο μηνυμα.

[PGouv]

Δεν ξερω απο παιχνιδια προγραμματισμο αλλα σαν πρωτη απαντηση μπορεις να δεις δομη quad tree ωστε να ζωγραφιζεις στο panel οτι χρειαζεσαι μονο .Και θες κατι να μεταφραζει τις συντεταγμενες. Δηλαδη αν το canvas ειναι οσο η οθονη θα προχωρα φαινομενικα και οχι στη πραγματικοτητα.
Εξαλου δε γινεται αλλιως θα ζοριζεται μετα.

[zaranero]

http://jsfiddle.net/CQPeU/2/

Κατι τετοιο εχω υποψιν μου , αλλα να μετακινειται και σε x και ψ αξονα και να μπορω να κανω αυτα που θελω να κανω... τεσπα πρεπει να μελετησω θα επανερθω.

[nikospara]

Καλησπέρα,

Έχω την αίσθηση ότι αν η "μύτη" πχ του τριγώνου είναι έξω από τον καμβά δεν έχεις πρόβλημα: δε θα κάνει scroll, αλλά όσο από το τρίγωνο είναι μέσα θα ζωγραφιστεί. Για να κάνεις scroll, zoom πρέπει να κάνεις το εξής: Οι συντεταγμένες των σημείων που σε ενδιαφέρουν θα είναι σε έναν δικό σου χώρο. Για να προβληθούν στην οθόνη θα περνάνε από τους κατάλληλους γεωμετρικούς μετασχηματισμούς. Στον καμβά θα δίνεις να ζωγραφίσει σχήματα βάσει των μετασχηματισμένων σημείων. Σε κάθε βήμα του scrolling θα ξαναζωγραφίζεις τον καμβά με νέο μετασχηματισμό και θα δίνεται η ψευδαίσθηση του scrolling.

Δές και βιβλιοθήκες, πχ RaphaelJS (είναι για SVG, αλλά ίσως σου κάνει), Processing.JS, Fabric.js, Paper.js, KineticJS (έχω χρησιμοποιήσει μόνο την Raphael).

[zaranero]

Ευχαριστω. Το RaphaelJS το ειχα ανακαλυψει στην περιηγηση μου περι αυτου του προβληματος και σκεφτομαι να το χρησιμοποιησω , αλλα ακομα δεν ξερω , διαβαζω ορισμενα πραγματα και ακομα δεν εχω γραψει ουτε μια γραμμη κωδικα. Πιστευω στις επομενες μερες να αρχισω τις αποπειρες για αυτο που θελω να φτιαξω.

Ευχαριστω για τις συμβουλες και μη χαθεις εεεεεεε

- - - Updated - - -

Ευχαριστω και σενα pgouv και θα κοιταξω για τα quad tree... με τα μουτρα στη μελετη:P

[xcyanx]

Αυτο που ουσιαστικά θες είναι ενα viewport... Για html5 βρήκα αυτό http://stackoverflow.com/questions/1...ort-for-canvas . Στπ δε'υτερο post έχει κώδικα js για το πως μπορείς να φτιάξεις το viewport.

Και αυτός είναι ο κώδικας που έχει http://jsfiddle.net/kmHZt/

- - - Updated - - -

Η και αυτό http://jsfiddle.net/gfcarv/QKgHs/

[Chrism4111]

http://jsfiddle.net/CQPeU/2/

Κατι τετοιο εχω υποψιν μου , αλλα να μετακινειται και σε x και ψ αξονα και να μπορω να κανω αυτα που θελω να κανω... τεσπα πρεπει να μελετησω θα επανερθω.

Ο κώδικας έτσι ώστε να μετακινείτε και στον χ και στον y αξονα.. Μακαρι να βοήθησα...

var plot = [{
  x: 50,
  y: 100
}, {
  x: 200,
  y: 200
}, {
  x: 400,
  y: 300
}, {
  x: 500,
  y: 190
}];

var can = document.getElementById("can"),
  ctx = can.getContext('2d'),
  dragging = false,
  lastX = 0,lastY = 0,
    translatedY = 0, 
  translated = 0;


var grid = (function(dX, dY){
  var can = document.createElement("canvas"),
      ctx = can.getContext('2d');
  can.width = dX;
  can.height = dY;
  // fill canvas color
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, dX, dY);
  
  // x axis
  ctx.strokeStyle = 'orange';
  ctx.moveTo(.5, 0.5);
  ctx.lineTo(dX + .5, 0.5);
  ctx.stroke();
  
  // y axis
  ctx.moveTo(.5, .5);
  ctx.lineTo(.5, dY + .5);
  ctx.stroke();
  
  return ctx.createPattern(can, 'repeat');
})(100, 50);

ctx.scale(1, -1);
ctx.translate(0, -400);

can.onmousedown = function (e) {
  var evt = e || event;
  dragging = true;
  lastX = evt.offsetX;
    lastY = evt.offsetY;
}

window.onmousemove = function (e) {
  var evt = e || event;
  if (dragging) {
    var delta = evt.offsetX - lastX;
      var deltaY = evt.offsetY - lastY;
    translated += delta;
      translatedY += deltaY;
    ctx.translate(delta, -deltaY);
    lastX = evt.offsetX;
      lastY = evt.offsetY;
    draw();
  }
}

window.onmouseup = function () {
  dragging = false;
}

function draw() {
  ctx.clearRect(-translated, translatedY, 600, 400);
  ctx.rect(-translated, translatedY, 600, 400);
  ctx.fillStyle = grid;
  ctx.fill();
  ctx.fillStyle = "#fff";
  for (var i = 0; i < plot.length; i++) {
    ctx.beginPath();
    ctx.arc(plot[i].x, plot[i].y, 5, 0, 2 * Math.PI);
    ctx.fill();
  }
}

draw();