Tele multiple nel browser - Come procedere?

Penso che faresti meglio con 4 elementi di tela. Ciò darebbe a ciascuno il proprio contesto e ti consentirà di rispondere più semplicemente agli eventi del mouse su di essi. Inoltre, dal punto di vista del disegno, non dovrai preoccuparti del clipping. gli iframe sarebbero completamente inutili qui.

A proposito, potresti voler esaminare alcune librerie basate su Canvas come Fabric.js, poiché potrebbero rendere più facili le interazioni con la grafica.

In ogni caso, la soluzione migliore sarebbe utilizzare una tela per ogni pannello.

Hai notato in uno dei tuoi commenti:

Using iframes does reduce the coding workload a significant amount. You don't have to manage four different contexts. In fact you could code the boxes all the same way, with a flag element (flag = ellipse or bezier or bspline or nurb) (That was how the original applet was coded...)

Ma non vedo come utilizzare gli iframe ridurrebbe in particolare la codifica. Più probabilmente probabilmente avresti codificato di più se hai usato un iframe, potenzialmente potresti venire incontro a problemi dolorosi dovuti agli iframe.

Ecco come puoi risolvere il problema, il codice parla da solo:

/**
 * Pane object is a map from ID to options specific to a pane.
 * The id will be used for each canvas element, and the options will determine
 * what will be drawn on a canvas.
 * @type object
 */
var pane = {
    "ellipse": {
        label: "Simple Straight Line & Ellipse Technique",
        degree: null,
        buttons: [{
                label: "Information",
                execute: function () {
                    // implementation of what happens when the 'Information'
                    // button on the ellipse canvas is clicked.
                }
            },
            {
                label: "Reset Frame",
                execute: function () {
                    // implementation of what happens when the 'Reset Frame'
                    // button on the ellipse canvas is clicked.
                }
            }]
    },
    "beizer": {
        label: "Beizer Technique",
        degree: null,
        buttons: [/* You have a pattern to follow above */]
    },
    "b-spine": {
        label: "B-Spine Technique with ...",
        degree: 3,
        buttons: [/* You have a pattern to follow above */]
    },
    "nurbs": {
        label: "NURBS with uniform ...",
        degree: 3,
        buttons: [/* You have a pattern to follow above */]
    }
};

// Extract the IDs for each canvas, and call 'draw' for each one of them.
Object.keys(pane).forEach(draw);

/**
 * Draws on the canvas with the given id.
 * @param {string} id ID of a canvas element
 * @returns {undefined}
 */
function draw(id) {
    var option, canvas, context;

    option = pane[id];
    canvas = document.getElementById(id);

    // Now you are ready to implement your drawing,
    context = canvas.getContext("2d");
    // if you wanted the label you can have it from 'option.label'.
    // The rest is up to your imagination...
}

In base all'opzione associata a ciascun riquadro, è possibile passare a una logica di disegno speciale.

Ouch. Si scopre che a causa di un problema significativo non menzionato in precedenza (o nemmeno capito al momento della pubblicazione originale) era più facile andare con quattro iframe.

Si noti che una parte significativa del display è comune a tutti e dovrebbe essere ricreata quattro volte.

Il problema era una schermata di testo orientata all'aiuto che avrebbe sovrascritto la tela. Da quello che posso vedere, le immersioni su tela e testo non possono occupare lo stesso spazio nel tempo. per qualsiasi motivo, gli elementi Canvas sono sempre sanguinati attraverso il div incluso le immagini di sfondo, ecc ... Ho finito per usare jQuery per mostrare e nascondere elementi diversi. Quando si sommano sovrapposizioni, i quattro elementi canvas su una singola pagina sono diventati brutti.

Inoltre, ho avuto un po 'di tempo con CSS e più elementi canvas. Va bene se hai uno schermo di dimensioni fisse, elementi fluttuanti, non così tanto. So che gli iframe sono "cattivi" .. così sia.

utilizzare iframe ha reso il lavoro molto più semplice ...

    <div class="container">
        <iframe src="./bezier_curve.html?lineType=Simple"></iframe>
        <iframe src="./bezier_curve.html?lineType=Bezier"></iframe>
    </div>
    <div style="clear: both;"></div>
    <div class="container">
        <iframe src="./bezier_curve.html?lineType=BSpline"></iframe>
        <iframe src="./bezier_curve.html?lineType=NURB"></iframe>
    </div>
    <div style="clear: both;"></div>

ref: Come passare un parametro URL. ..