tekilla209
Mitglied
Hallo Leute,
ich spiele etwas mit Canvas und versuche ein Sechseck zu zeichnen, und mit einem Bild zu füllen. Das klappt ohne KineticJS auch schon ganz gut:
Allerdings würde ich gern KineticJS benutzen, das bietet einige Vorteile drag and drop zum Bleistift. Bei KineticJS gibt es mit "Regular Polygon" auch schon eine vorefertigte möglichkeit um vielecke zu zeichnen. Hier ein Beispiel:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-regular-polygon-tutorial/
Nur bekomme ich es einfach nicht hin diesem RegularPolygon ein Pattern mitzugeben.
Ich hab schon stundenlang alles mögliche versucht, erst das ImageObjekt erstellen und in der onLoad funktion das 6eck. Oder beides unabhängig und das pattern im constructor von RegularPolygon übergeben. Egal wie ich checks einfach nicht.
Kann mir das kurz jemand erklären? Das verlinkte Tutorial ist diesbezüglich nicht sehr hilfreich.
Danke schonmal für eure Mühen.
PS: Warum eigentlich cos in der drawPolygon funktion? Ich hab sie zwar selbst geschrieben, aber eigentlich müsste es doch sinus sein?! Laut Wikipedia http://de.wikipedia.org/wiki/Sechseck r/2 * sqrt(3) das entspricht sinus 60 grad. Mit sinus sieht das ganze aber nicht nach nem 6eck aus?
ich spiele etwas mit Canvas und versuche ein Sechseck zu zeichnen, und mit einem Bild zu füllen. Das klappt ohne KineticJS auch schon ganz gut:
HTML:
<html>
<head>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.0.js">
</script>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
var pattern = context.createPattern(imageObj, "repeat");
drawHaxagon(context, 60, 105, 62);
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
context.fillStyle = pattern;
context.fill();
};
imageObj.src = "Unbenannt.png";
};
function drawHaxagon(context, radius, x, y) {
context.beginPath();
context.moveTo(x-(Math.cos(60) * radius), y-(radius/2));
context.lineTo(x-(Math.cos(60) * radius), y+(radius/2));
context.lineTo(x, y+radius);
context.lineTo(x+(Math.cos(60) * radius), y+(radius/2));
context.lineTo(x+(Math.cos(60) * radius), y-(radius/2));
context.lineTo(x, y-radius);
context.closePath(); // complete custom shape
}
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200">
</canvas>
</body>
</html>Allerdings würde ich gern KineticJS benutzen, das bietet einige Vorteile drag and drop zum Bleistift. Bei KineticJS gibt es mit "Regular Polygon" auch schon eine vorefertigte möglichkeit um vielecke zu zeichnen. Hier ein Beispiel:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-regular-polygon-tutorial/
Nur bekomme ich es einfach nicht hin diesem RegularPolygon ein Pattern mitzugeben.
Ich hab schon stundenlang alles mögliche versucht, erst das ImageObjekt erstellen und in der onLoad funktion das 6eck. Oder beides unabhängig und das pattern im constructor von RegularPolygon übergeben. Egal wie ich checks einfach nicht.
Kann mir das kurz jemand erklären? Das verlinkte Tutorial ist diesbezüglich nicht sehr hilfreich.
Danke schonmal für eure Mühen.
PS: Warum eigentlich cos in der drawPolygon funktion? Ich hab sie zwar selbst geschrieben, aber eigentlich müsste es doch sinus sein?! Laut Wikipedia http://de.wikipedia.org/wiki/Sechseck r/2 * sqrt(3) das entspricht sinus 60 grad. Mit sinus sieht das ganze aber nicht nach nem 6eck aus?
