Hallo,
ich möchte meine Rechtecke mit einem Bild füllen, leider werden die Bilder nicht angezeigt. Ich habe die Funktion zum Bild-laden aus einem Beispiel kopiert und angepasst, leider ohne Erfolg.
[src=javascript]<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#container{
width: 800px;
height: 600px;
border: 0px solid #000;
background:#DDD;
margin:auto;
margin-top:100px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" ></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script>
$(document).ready(function() {
var CELL_SIZE = 50, //größe der blöcke
w = 16, //anz breite
h = 12, //anz höhe
W = w * CELL_SIZE,
H = h * CELL_SIZE;
var layer = new Kinetic.Layer();
function loadImages(sources, callback) {
var assetDir = 'http://www.html5canvastutorials.com/demos/assets/';
var images = {};
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if (++loadedImages >= numImages) {
callback('', images);
}
};
images[src].src = assetDir + sources[src];
}
}
function createBlocks(images) {
var blocks = [];
for (i = 0; i <= w; i++) { //x
blocks.push([]);
for (j = 0; j <= h; j++) { //y
blocks.push(new Kinetic.Rect({
x: i * CELL_SIZE,
y: j * CELL_SIZE,
width: CELL_SIZE,
height: CELL_SIZE,
setZIndex:5,
fill: "red",
stroke: 2,
name: "endOfWorld"
}));
layer.add(blocks[j]);
}
}
for (i = 0; i <= w; i++) { //x
for (j = 0; j <= h; j++) { //y
if (i % 4 === 0) {
blocks[j].setFill("yellow");
blocks[j].setFillPatternImage(images.lion);
}
if (j % 4 === 0) {
blocks[j].setFill("grey");
}
if (j % 4 === 0 && i % 4 === 0) {
blocks[j].setFill("green");
}
}
}
}
var sources = {
lion: 'lion.png',
monkey: 'monkey.png'
};
loadImages(sources, createBlocks);
var stage = new Kinetic.Stage({
container: 'container',
width: 800,
height: 600,
draggable: true
});
stage.add(layer);
var anim = new Kinetic.Animation(function(frame) {
if (stage.getX() > 0) {
stage.setX(0);
}
if (stage.getY() > 0) {
stage.setY(0);
}
}, layer);
anim.start();
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>[/src]
Kann mir jemand sagen warum das nicht funktioniert? Ein Fehler wird nämlich nicht ausgegeben, es ist einfach nur kein Bild da
lg Zuyas
ich möchte meine Rechtecke mit einem Bild füllen, leider werden die Bilder nicht angezeigt. Ich habe die Funktion zum Bild-laden aus einem Beispiel kopiert und angepasst, leider ohne Erfolg.
[src=javascript]<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#container{
width: 800px;
height: 600px;
border: 0px solid #000;
background:#DDD;
margin:auto;
margin-top:100px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" ></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script>
$(document).ready(function() {
var CELL_SIZE = 50, //größe der blöcke
w = 16, //anz breite
h = 12, //anz höhe
W = w * CELL_SIZE,
H = h * CELL_SIZE;
var layer = new Kinetic.Layer();
function loadImages(sources, callback) {
var assetDir = 'http://www.html5canvastutorials.com/demos/assets/';
var images = {};
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if (++loadedImages >= numImages) {
callback('', images);
}
};
images[src].src = assetDir + sources[src];
}
}
function createBlocks(images) {
var blocks = [];
for (i = 0; i <= w; i++) { //x
blocks.push([]);
for (j = 0; j <= h; j++) { //y
blocks.push(new Kinetic.Rect({
x: i * CELL_SIZE,
y: j * CELL_SIZE,
width: CELL_SIZE,
height: CELL_SIZE,
setZIndex:5,
fill: "red",
stroke: 2,
name: "endOfWorld"
}));
layer.add(blocks[j]);
}
}
for (i = 0; i <= w; i++) { //x
for (j = 0; j <= h; j++) { //y
if (i % 4 === 0) {
blocks[j].setFill("yellow");
blocks[j].setFillPatternImage(images.lion);
}
if (j % 4 === 0) {
blocks[j].setFill("grey");
}
if (j % 4 === 0 && i % 4 === 0) {
blocks[j].setFill("green");
}
}
}
}
var sources = {
lion: 'lion.png',
monkey: 'monkey.png'
};
loadImages(sources, createBlocks);
var stage = new Kinetic.Stage({
container: 'container',
width: 800,
height: 600,
draggable: true
});
stage.add(layer);
var anim = new Kinetic.Animation(function(frame) {
if (stage.getX() > 0) {
stage.setX(0);
}
if (stage.getY() > 0) {
stage.setY(0);
}
}, layer);
anim.start();
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>[/src]
Kann mir jemand sagen warum das nicht funktioniert? Ein Fehler wird nämlich nicht ausgegeben, es ist einfach nur kein Bild da
lg Zuyas
