Noch nicht viel geschrieben
Hallo,
Ich bin dabei ein Einrichtungstool umzusetzen. Dabei verwende ich KineticJS. Drag and Drop funktioniert schon bei allen Objekten.
Problem habe ich beim Drehen und beim Speichern.
Per Buttonklick soll sich das aktuelle/geklickte Objekt drehen bzw. löschen. Momentan geht das nur mit Image1. Wie kann ich das auf alle anwenden?
Ich bin dabei ein Einrichtungstool umzusetzen. Dabei verwende ich KineticJS. Drag and Drop funktioniert schon bei allen Objekten.
Problem habe ich beim Drehen und beim Speichern.
Per Buttonklick soll sich das aktuelle/geklickte Objekt drehen bzw. löschen. Momentan geht das nur mit Image1. Wie kann ich das auf alle anwenden?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
<title>Einrichtungstool</title>
</head>
<body>
<!-- TOOLBAR -->
<div id="toolleiste">
<ul>
<li id="iconLi"><a href="index.html" title="Zurück"><img id="icon" src= "img/icons/zurueck.png" /></a></li>
<button id="rotate" title="Drehen">Drehen</button>
<!--<li id="iconLi"><img id="icon" src= "img/icons/loeschen.png" title="Löschen"/></li> -->
<button id="delete" title="Löschen">Löschen</button>
<!--<li id="iconLi"><img id="icon" src= "img/icons/speichern.png" title="Speichern"/></li>-->
<button id="save" title="Speichern">Speichern</button>
</ul>
</div>
<!-- OBJECTBOX -->
<div id="objectbox">
<canvas id='myCanvas'></canvas>
</div>
<div class="room">
</div>
<div id="footer">
© 2013 Theres Scheucher mt111018, Katharina Spitzer mt111036
</div>
<div id="container"></div>
<script src="jquery-1.9.1.min.js"></script>
<script src="canvasutilities.js"></script>
<script src="kinetic-v4.6.0-beta.js"></script>
<script defer="defer">
var stage;
var img1;
var img2;
var layer;
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
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 = sources[src];
}
}
function initStage(images) {
stage = new Kinetic.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
layer = new Kinetic.Layer();
img1 = new Kinetic.Image({
id: "img1",
image: images.img1,
x: 70,
y: 70,
width: 100,
height: 100,
draggable: true,
visible: true,
name: 'img1',
offset: [50, 50] // move center point to the center of the img with offset
});
img2 = new Kinetic.Image({
id: "img2",
image: images.img2,
x: 20,
y: 125,
draggable: true,
visible: true,
name: 'img2'
});
layer.add(img1);
layer.add(img2);
stage.add(layer);
layer.on('mouseover', function(evt) {
var shape = evt.shape;
document.body.style.cursor = 'pointer';
layer.draw();
});
layer.on('mouseout', function(evt) {
var shape = evt.shape;
document.body.style.cursor = 'default';
layer.draw();
});
}
var sources = {
img1: 'img/objects/kueche/spuele1.png',
img2: 'img/objects/kueche/spuele2.png'
};
loadImages(sources, initStage);
// DREHEN
$("#rotate").click(function () {
var imgRotate=90*Math.PI/180;
img1.rotate(imgRotate);
layer.draw();
});
// LÖSCHEN
$("#delete").click(function () {
img1.hide();
layer.draw();
});
// SPEICHERN
document.getElementById('save').addEventListener('click', function() {
/*
* since the stage toDataURL() method is asynchronous, we need
* to provide a callback
*/
stage.toDataURL({
width: window.innerWidth,
height: window.innerHeight,
mimeType: "image/jpeg",
callback: function(dataUrl) {
/*
* here you can do anything you like with the data url.
* In this tutorial we'll just open the url with the browser
* so that you can see the result as an image
*/
window.open(dataUrl);
}
});
}, false);
</script>
</body>
</html>
