[KineticJS] Bild wird nicht angezeigt.

Zuyas · 8 Jan. 2014

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

Kugelfisch · 8 Jan. 2014

Dein Code hat zwei unabhängige Probleme: Einerseits rufst du die Callback-Funktion über
[src=javascript]callback('', images);[/src]
auf, deine createBlocks()-Funktion wertet jedoch nur den ersten Parameter aus, welcher immer ein leerer String ist. callback(images); wäre in diesem Fall passender.

Ausserdem hat bei einem gleichzeitig gesetzten fill und fillPatternImage standardmässig die als fill gesetzte Farbe (rot, wird später durch gelb ersetzt) Priorität, vgl. https://github.com/ericdrowell/KineticJS/issues/242.

Zuyas · 8 Jan. 2014

Oh man.. Den 2. Parameter hatte ich beim testen gesetzt und vergessen ihn wieder zu entfernen.
Nachdem beheben davon und fillPriority:"pattern", funktioniert es jetzt. Vielen Dank! Hat mich 2 ganze Tage geärgert

[KineticJS] Bild wird nicht angezeigt.

Zuyas

Mau

Kugelfisch

Nerd

Zuyas

Mau