Steuern Sie das Zeichnen auf einer Leinwand in einem Fenster von einem anderen Fenster aus (mit Schiebereglern) [geschlo ⇐ CSS

CSS verstehen
Post Reply Previous topicNext topic
Anonymous
 Steuern Sie das Zeichnen auf einer Leinwand in einem Fenster von einem anderen Fenster aus (mit Schiebereglern) [geschlo

Post by Anonymous »

Der folgende Code zeigt eine HTML-Datei mit einer Leinwand und einer Reihe von Schiebereglern, mit denen gesteuert wird, was auf der Leinwand angezeigt wird (in diesem Fall das Äquivalent eines Spirograph-Spielzeugs).
Ich möchte die Schieberegler in einem anderen Fenster haben, idealerweise, damit ich das eine Fenster auf einem Monitor und das andere auf einem anderen Monitor haben kann.
Die Frage ist: Wie setze ich es um?
Siehe Gegenwart Ein-Fenster-Code unten:
In Stack Snippet:

Code: Select all

var TAU = 2 * Math.PI;
var DEGTORAD = TAU / 360.0;

function update() {
var canvas = document.getElementById('canvas');
var ctx_main = canvas.getContext('2d');
var w = parseFloat(canvas.width);
var h = parseFloat(canvas.height);
var R1 = parseFloat(document.getElementById('R1_id').value);
var R2 = parseFloat(document.getElementById('R2_id').value);

canvas.width = canvas.width;
ctx_main.lineWidth = 1;

var X0 = w / 2;
var Y0 = h / 2;
document.getElementById('start_angle_value').innerHTML = document.getElementById('start_angle_id').value;
document.getElementById('end_angle_value').innerHTML = document.getElementById('end_angle_id').value;
document.getElementById('angle_inc_value').innerHTML = document.getElementById('angle_inc_id').value;
document.getElementById('rho_value').innerHTML = document.getElementById('rho_id').value;
document.getElementById('R1_value').innerHTML = document.getElementById('R1_id').value;
document.getElementById('R2_value').innerHTML = document.getElementById('R2_id').value;
var R1 = document.getElementById('R1_id').value;
var R2 = document.getElementById('R2_id').value;
var rho = document.getElementById('rho_id').value;
var start_angle = document.getElementById('start_angle_id').value;
var end_angle = document.getElementById('end_angle_id').value;
var angle_inc = document.getElementById('angle_inc_id').value;
do_spirograph_one_run(ctx_main, parseFloat(R1), parseFloat(R2), parseFloat(X0), parseFloat(Y0), start_angle, end_angle, angle_inc, parseFloat(rho), "red");
} // end of update() function
// end of update() function

function init() {
document.getElementById('R1_id').oninput = update;
document.getElementById('R2_id').oninput = update;
document.getElementById('start_angle_id').oninput = update;
document.getElementById('end_angle_id').oninput = update;
document.getElementById('angle_inc_id').oninput = update;
document.getElementById('rho_id').oninput = update;
update();
} // end of init() function
// end of init() function

window.onload = init;

function draw_line(ctx_main, x_from, y_from, x_to, y_to, line_width, line_color) {
ctx_main.lineWidth = line_width;
ctx_main.strokeStyle = line_color;
ctx_main.beginPath();
ctx_main.moveTo(x_from, y_from);
ctx_main.lineTo(x_to, y_to);
ctx_main.stroke();
ctx_main.closePath();
} // end of draw_line(6) function
// end of draw_line(6) function

function draw_circle(ctx_main, x, y, r, angle_from, angle_to, line_width, line_color, cw_ccw, fill) {
ctx_main.lineWidth = line_width;
ctx_main.strokeStyle = line_color;
ctx_main.beginPath();
ctx_main.arc(x, y, r, angle_from, angle_to, cw_ccw);
ctx_main.stroke();
if (fill != null)
ctx_main.fill();
ctx_main.closePath();
} // end of draw_circle(7) function
// end of draw_circle(7) function

function do_spirograph_one_run(ctx_main, R0, R1, X0, Y0, start_angle, end_angle, angle_inc, rho, current_color) {
var line_width = ctx_main.lineWidth;
var line_color = ctx_main.strokeStyle;
if (document.getElementById("spirograph_show_circles").checked) {
draw_circle(ctx_main, X0, Y0, R0, 0, TAU, 1, "red", null, null); // draw R0
draw_circle(ctx_main, X0 + R0 - R1, Y0, R1, 0, TAU, 1, "green", null, null); // draw R1
draw_circle(ctx_main, X0 + R0 - R1 + rho, Y0, 3, 0, TAU, 5, "blue", null, null); // draw rotating point at starting position
ctx_main.lineWidth = line_width;
}
for (var angle = DEGTORAD * start_angle; angle < DEGTORAD * end_angle;  angle += DEGTORAD * angle_inc) {
draw_line(ctx_main, X0 + (R0 - R1) * Math.cos(angle) + rho * Math.cos((R0 - R1) / R1 * angle),
Y0 + (R0 - R1) * Math.sin(angle) - rho * Math.sin((R0 - R1) / R1 * angle),
X0 + (R0 - R1) * Math.cos(angle + DEGTORAD * angle_inc) + rho * Math.cos((R0 - R1) / R1 * (angle + DEGTORAD * angle_inc)),
Y0 + (R0 - R1) * Math.sin(angle + DEGTORAD * angle_inc) - rho * Math.sin((R0 - R1) / R1 * (angle + DEGTORAD * angle_inc)),
ctx_main.lineWidth, current_color, 0, 0, "", "", 0, 0, "", "");
} /* end of radius loop */
} // end of do_spirograph_one_run(11) function
// end of do_spirograph_one_run(11) function

document.getElementById('R1_value').innerHTML = document.getElementById('R1_id').value;
document.getElementById('R2_value').innerHTML = document.getElementById('R2_id').value;

Code: Select all

input[type=range] {
width: 800px;
}

Code: Select all




&nbsp;Show Original Circles



Start Angle


End Angle


Angle Inc


Rho


R1


R2


Original-HTML:

Code: Select all




Circle

input[type=range] { width:800px;  }


var TAU = 2*Math.PI;
var DEGTORAD = TAU / 360.0;

function update() {
var canvas = document.getElementById('canvas');
var ctx_main = canvas.getContext('2d');
var w = parseFloat(canvas.width);
var h = parseFloat(canvas.height);
var R1 = parseFloat(document.getElementById('R1_id').value);
var R2 = parseFloat(document.getElementById('R2_id').value);

canvas.width = canvas.width;
ctx_main.lineWidth = 1;

var X0 = w / 2;
var Y0 = h / 2;
document.getElementById('start_angle_value').innerHTML = document.getElementById('start_angle_id').value;
document.getElementById('end_angle_value').innerHTML = document.getElementById('end_angle_id').value;
document.getElementById('angle_inc_value').innerHTML = document.getElementById('angle_inc_id').value;
document.getElementById('rho_value').innerHTML = document.getElementById('rho_id').value;
document.getElementById('R1_value').innerHTML = document.getElementById('R1_id').value;
document.getElementById('R2_value').innerHTML = document.getElementById('R2_id').value;
var R1 = document.getElementById('R1_id').value;
var R2 = document.getElementById('R2_id').value;
var rho = document.getElementById('rho_id').value;
var start_angle = document.getElementById('start_angle_id').value;
var end_angle = document.getElementById('end_angle_id').value;
var angle_inc = document.getElementById('angle_inc_id').value;
do_spirograph_one_run(ctx_main, parseFloat(R1), parseFloat(R2), parseFloat(X0), parseFloat(Y0), start_angle, end_angle, angle_inc, parseFloat(rho), "red");
} // end of update() function
// end of update() function

function init() {
document.getElementById('R1_id').oninput = update;
document.getElementById('R2_id').oninput = update;
document.getElementById('start_angle_id').oninput = update;
document.getElementById('end_angle_id').oninput = update;
document.getElementById('angle_inc_id').oninput = update;
document.getElementById('rho_id').oninput = update;
update();
} // end of init() function
// end of init() function

window.onload = init;

function draw_line(ctx_main, x_from, y_from, x_to, y_to, line_width, line_color) {
ctx_main.lineWidth = line_width;
ctx_main.strokeStyle = line_color;
ctx_main.beginPath();
ctx_main.moveTo(x_from, y_from);
ctx_main.lineTo(x_to, y_to);
ctx_main.stroke();
ctx_main.closePath();
} // end of draw_line(6) function
// end of draw_line(6) function

function draw_circle(ctx_main, x, y, r, angle_from, angle_to, line_width, line_color, cw_ccw, fill) {
ctx_main.lineWidth = line_width;
ctx_main.strokeStyle = line_color;
ctx_main.beginPath();
ctx_main.arc(x, y, r, angle_from, angle_to, cw_ccw);
ctx_main.stroke();
if (fill != null)
ctx_main.fill();
ctx_main.closePath();
} // end of draw_circle(7) function
// end of draw_circle(7) function

function do_spirograph_one_run(ctx_main, R0, R1, X0, Y0, start_angle, end_angle, angle_inc, rho, current_color) {
var line_width = ctx_main.lineWidth;
var line_color = ctx_main.strokeStyle;
if (document.getElementById("spirograph_show_circles").checked) {
draw_circle(ctx_main, X0                , Y0, R0, 0, TAU, 1, "red", null, null); // draw R0
draw_circle(ctx_main, X0 + R0 - R1      , Y0, R1, 0, TAU, 1, "green", null, null); // draw R1
draw_circle(ctx_main, X0 + R0 - R1 + rho, Y0, 3, 0, TAU, 5, "blue", null, null); // draw rotating point at starting position
ctx_main.lineWidth = line_width;
}
for (var angle =  DEGTORAD * start_angle; angle < DEGTORAD * end_angle;  angle += DEGTORAD * angle_inc)
{
draw_line(ctx_main, X0 + (R0 - R1) * Math.cos(angle) + rho * Math.cos((R0 - R1)/R1 * angle),
Y0 + (R0 - R1) * Math.sin(angle) - rho * Math.sin((R0 - R1)/R1 * angle),
X0 + (R0 - R1) * Math.cos(angle + DEGTORAD * angle_inc) + rho * Math.cos((R0 - R1)/R1 * (angle + DEGTORAD * angle_inc)),
Y0 + (R0 - R1) * Math.sin(angle + DEGTORAD * angle_inc) - rho * Math.sin((R0 - R1)/R1 * (angle + DEGTORAD * angle_inc)),
ctx_main.lineWidth, current_color,  0, 0, "", "", 0, 0, "", "");
} /* end of radius loop */
} // end of do_spirograph_one_run(11) function
// end of do_spirograph_one_run(11) function








&nbsp;Show Original Circles


Start Angle
End Angle
Angle Inc
Rho
R1
R2


document.getElementById('R1_value').innerHTML = document.getElementById('R1_id').value;
document.getElementById('R2_value').innerHTML = document.getElementById('R2_id').value;
Top
Post Reply Previous topicNext topic

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS”