Hallo Sempervivum,
im Urlaub oder to busy?
Das wär ein Problem für mich!
Gruß
Jochen
Hallo Sempervivum,
im Urlaub oder to busy?
Das wär ein Problem für mich!
Gruß
Jochen
Kann es sein, dass jcanvas sich nicht mit visual studio verträgt?
In dem Beispiel wird das rRechteck gezeichnet, der Text wird aber nicht gebracht.
Fehlermeldung
TypeError: propCache is undefined
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.0/jcanvas.js">
</script> <style type="text/css">
body { background-color: #F3EFF9; margin: 30px; margin-top: 10px; }
#Canvas { position: absolute; top: 0px; left: 0px; border: 5px red solid; background-color: #FFEFDB; }
</style>
</head>
<body> <canvas id="Canvas" width="640" height="460"></canvas>
<script>
$('canvas').addLayer({ type: 'rectangle', fillStyle: 'red', x: 100, y: 100, width: 100, height: 50, fromCenter: false }) .drawLayers();
$('canvas').drawText({ fillStyle: '#9cf', strokeStyle: '#25a', strokeWidth: 2, x: 150, y: 200, fontSize: 48, fontFamily: 'Verdana, sans-serif', text: 'Hello', fromCenter: false });
</script>
</body>
</html>
Gruß
Jochen
Was bringt step: function?
In dem folgenden Beispiel teste ich ob ich eine Animation unterbrechen kann. Ich lasse ein Rectangle über eine Erhöhung des X Wertes horizontal über den Bildschirm wandeln.
in step: function versuche ich ab einen bestimmten X Wert eine Veränderung herbei zu führen. Nichts passiert.
Was nutzt dann die Step funcion?
var x;
$('canvas').drawRect({
layer: true,
name:'myBox',
fillStyle: 'red',
x: 100, y: 100,
width: 100, height: 50
});
$('canvas').animateLayer('myBox', {
x: 400
}, {
duration: 3000,
easing: 'swing',
step: function (now, fx, layer) {
if (x>250){fillStyle="green";
aler("hallo"); }
},
complete: function (layer) {
$('canvas').setLayer('myBox', {
fillStyle: 'blue',
rotate: 30,
x: '+=10',
y: '-=10'
})
.drawLayers();
}
});
</script>
LG aus Portugal
Jochen
Entschuldigung, das align habe ich übersehen.
Wünsche eine tolle Woche.,
Ich gebe einen mehrzeilligen Text über drawText aus. Der Zeilenumbruch gelingt mit \n.
Ich habe diverse Versuche gestart den Text linksbündig auszugeben.
Ich dachte nach diversen Hinweisen im Netz, dass es mit textAlign : 'left'klappt.
$('canvas').setLayer('myText', {
fillStyle: 'black',
x: 50,
y: 100,
textAlign: 'left',
text: 'Am Bildschirm werden gleich Namen erscheinen. Vornamen + Nachnamen. Diese musst du dir merken.\n\n'+
'Nach einer ge...........................................................
Ergebnis: Nichts passiert. Pustekuchen
LG
Jochen
Ich kenne die Ursache.
html-seminar.de/woltlab/attachment/1480/
Wenn ich in der ersten Reihe im ersten Durchlauf einen Vornamen angeklickt habe lasse ich die Reihe mit
function Treffer(v,i,nn,name,ar)
{
if (v==i)
{
$('canvas').setLayer( 'ntext' + (nn-2) + transfer, {
fillStyle: 'red',
text: name[ar[transfer]],
})
.drawLayers();
$('canvas').setLayerGroup('Rec' + nn, {
visible:false,
}).drawLayers();
;
$('canvas').setLayerGroup('Namen' + nn, {
visible:false,
}).drawLayers();
;
}
}
Verschwinden.
Im zweiten Durchlauf erstelle ich die Namensleiste neu mit anderen Vornamen.
Und dann funktioniert das zweite clicken nicht weil er ????????????????????? die Reihe aus dem ersten Durchlauf im Köcher hat.
Kann ich das Problem lösen wenn ich in der obigen
function ErstellNamensListe(nn,ar,rr,x0,y0,ff)
die alte Leiste wieder sichtbar mache und dann die neuen Namen für den Text ( Vornamen) reinschreibe.
Oder arbeitet ich bessewr mit removeLayers()?
LG
Jochen
Was mach ich jetzt schon wieder falsch. Gebe nach 2 Stunden auf.
In der fogenden Funktion ErstellNamensListe soll, wenn gklickt wird, die Funktion Treffer ausgeführt werden.
Das funktioniert nur einmal. Nur beim ersten Click Ereignis. Wird die Funktion ErstellNamensListe ein zweites Mal aufgerufen reagiert sie nicht auf das Click Ereignis..
function ErstellNamensListe(nn,ar,rr,x0,y0,ff)
{
var xstart = x0; var ystart =y0;
var wrect = 90; var hrect = 40; var dist = 5;
borderColor = 'black'; borderWidth = 2;
for ( let i =0 ; i<rr.length; i++)
{
$('canvas').drawRect({
layer: true,
name: 'Rec' + nn +i,
groups: [ 'Rec' + nn],
strokeStyle: 'black',strokeWidth: 1,fillStyle: 'lightblue',
x: xstart + (i*( wrect+dist)), y: ystart, width: wrect, height: hrect,
fromCenter: false,
click: function(layer)
{
if (ff == 1)
{
if (nn==3)
{
Treffer(zrv,i,nn,vnamen,brv);
}
}
}
});
$('canvas').drawText({
layer: true,
name: 'ntext' + nn +i,
groups: ['Namen'+nn],
fillStyle: 'black',
x: 5 + xstart+ (i* (wrect+dist)),
y: ystart+15,
text: ar[rr[i]],
fromCenter: false
});
}
}
Schöne Ostertage
Jochen
Entschuldige bitte. Habe wahrscheinlich von Sonnenschein geträumt.
Wenn man auf ein bestimmtes Feld klickt, kommt die folgende Funktion zur Anwendung;
function Treffer(v,i,nn)
{
if (zrv==i)
{
$('canvas').setLayer( 'ntext' + 1 + transfer, {
fillStyle: 'red',
text: vnamen[brv[transfer]],
})
.drawLayers();
$('canvas').setLayerGroup('rec' + nn, {
visible:false,
});
$('canvas').setLayerGroup('Namen' + nn, {
visible:false,
}) ;
}
}
klickt man auf das bestimmte Feld, dann wird gemäss
$('canvas').setLayer( 'ntext' + 1 + transfer, {....
der Text in Rot dargestellt,
Soweit in Ordnung.
Es werden aber nicht die beiden nachfolgenden setLayerGroup Anweisungen durchgeführt,
Wenn man dann ein ZWEITES Mal auf das betimmte Feld klickt, dann werden diese beiden Anweisungen ausgeführt-
Was ist da zu ändern, damit alle 3 Anweisungen mit dem 1.Klick erledigt werden.
Zur Info der Klick Aufruf:
click: function(layer)
{
if (ff == 1)
{
AendereText(1,' ???');
Treffer(zrv,i,nn);
}}
LG
Jochen
Super. Alles funktioniert so.
ich erzeuge mit der nachfolgend dargestellten Funktion 3 Reihen mit Rechtecken incl Text.
ErstellNamensListe(vnamen,brv,50,100,0);
ErstellNamensListe(nnamen,brn,50,150,0);
ErstellNamensListe(vnamen,mrv,50,250,1)
html-seminar.de/woltlab/attachment/1475/
Die Funktion ::
function ErstellNamensListe(ar,rr,x0,y0,ff)
{
var xstart = x0; var ystart =y0;
var wrect = 110; var hrect = 40; var dist = 5;
/////////////////////////////////////// Ausgabe Vornamen und Nachnamen
for ( let i =0 ; i<rr.length; i++)
{
$('canvas').drawRect({
layer: true,
strokeStyle: 'black',strokeWidth: 1,fillStyle: 'lightblue',
x: xstart + (i*( wrect+dist)), y: ystart, width: wrect, height: hrect,
fromCenter: false,
click: function(layer) {
if (ff == 1)
{
alert("test HI");}}
});
$('canvas').drawText({
layer: true,
name: 'ntext' + i,
groups: ['nachNamen'],
fillStyle: 'black',
x: 5 + xstart+ (i* (wrect+dist)),
y: ystart+15,
fontSize: 15,
fontFamily: 'Verdana, sans-serif',
text: ar[rr[i]],
fromCenter: false
});}}
//////////////////////
Wenn der Parameter ff in der Parameterleiste der Funktion = 1 gesetzt ist, soll ein Click
(hier im Beispiel) ein alert bringen.
Das funktioniert auch.
Aber:
Wenn ich die 3. Leiste ( hier ist ff = 1 gesetzt) anklicke, kommt das Alert . Es verschwinden aber die Namen auf der 2. und 3. Leiste
html-seminar.de/woltlab/attachment/1476/
Das gleiche passiert mit den Namen wenn ich im Canvas an einer beliebigen Stelle klicke.
LG
Jochen
Danke. Nachdem ich mich über
informiert habe, habe es begriffen.. Es funktioniert einwandfrei.
Vielen Dank für diesen sehr interessanten Tip
Danke, aber es funktioniert nicht.
return {narr1: arr1, narr2, arr2};
da habe ich hinter narr2 ein : statt Komma gesetzt.
Aber es wird thefunction angemeckert.
ReferenceError: thefunction is not defined
Hallo
Ich habe in einer Funktion zwei Arrays kreiert. Diese möchte ich über return an eine dritte Variable für eine andere Funktion übergeben.
So möchte ich erreichen, dass ich 2 Variable über ein return weitergen kann.
Nach der Übergabe möchte ich die beiden ursprünglichen Arrays wieder erstellen.
Ich habe es versucht mit var3 = array1.push(array2)
und dann
var31 = var3.slice(0,4)
var32 = var3.slic(4,9)
Es funktioniert nicht. UNDEFINED
Es muss an dem push liegen. Obwohl beim console.log die var3 wie gewünscht aussieht, passiert irgendwo im tieferen Inneren von Javascript etwas mit var3.
Kann ich es nur lösen indem ich var3 über eine Laufanweisung mit Array1 und Array2 fülle und später über slice trenne?.
LG
Jochen
Funktioniert nicht. Anbei lauffähige Version
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.0/jcanvas.js"></script>
<style type="text/css">
#Canvas {
position: absolute;
top: 0px;
left: 0px;
border: 1px red solid;#thing;
background-color: #FFEFDB;
}
</style>
</head>
<body>
<canvas id="Canvas" width="740" height="400" ></canvas>
<script>
var nnamen=new Array;
nnamen=["Wegmann","Schmidt","Schneider","Fischer","Weber","Meyer","Wagner","Becker","Schulz","Hoffmann","Koch",
"Bauer","Richter","Klein","Wolf","Neumann","Lange","Schmitt","Schmitz","Krause","Lehmann"];
var vnamen=new Array;
vnamen=["Anna","Maria","Julia","Eva","Olga","Reante","Baerbel","Ulla","Jan","Alexander",
"Michael","Christian","Peter", "Martin","Klaus","Andreas","Jens","Hans","Stefan","Wolfgang","Uwe","Marion","Claudia"];
cv = $("Canvas");
var x=100;
var y=100;
var breite =120;
var hoehe = 60;
for (let nr = 0; nr < 6; nr++) {
cv.drawRect({
name: 'rect' + nr,
layer: true,
strokeStyle: 'black',strokeWidth: 1,fillStyle: 'lightblue',
fillStyle: '#BCD9F0',
x: 10+nr*breite, y:100, width: 70, height: 40,
fromCenter: false,
click: function (layer) {
var txt = cv.getLayer('text' + nr).text;
alert(nr);
}
}).drawText({
name: 'text' + nr,
layer: true,
fillStyle: 'black',
x: 50+ nr* breite,
y: y + 10,
//text: nnamen[nr],
groups: ['myNamen']
});
var yy='text' + nr;
if (nr < 3) var txt = vnamen[nr];
else var txt = nnamen[nr]
$('canvas').setLayer('yy', { text: txt}).drawLayers();
}
</script>
</body>
</html>
Ich möchte einen Text mit Werten aus 2 Arrays in einem drawText ausgeben.
Ich habe hier den
text: auskommentiert
Auszug:
}).drawText({
name: 'text' + nr,
layer: true,
fillStyle: 'black',
x: x + wrect / 2,
y: y + hrect / 2,
//text: vnamen[nr],
groups: ['myNamen']
});
im Folgenden möchte ich text etwas überweisen. Wenn die Laufvariable kleiner 3 ist Text aus vnamen
ansonsten text aus nnamen:
var yy='text' + nr;
if (nr <3)
{ $('canvas').setLayer('yy', { text:vnamen[nr]}); }
else
{$('canvas').setLayer('yy', { text:nnamen[nr]});}
Ich dachte es funktioniert mit setLayers. Tuts bei mir aber nicht.
LG
Jochen
Potzblitz
Das Beispiel ist wirklich toll. Sehr anschaulich.
Jetzt habe ich auch die von Semper erstellte Funktion im Thread
begriffen.
Dank an alle
Guten Tag,
warum schreibt man let statt var?
for (let i = 0; i < 3; i += 1)
GzG
Jochen
Erledigt. Funktioniert dito mit Text.
Schönes Wochenende
Jochen
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.