Hello
I have a little File Manager which shows jpg files (GRID). When i click a file opens a WINDOW which shows the image. I also included a TOOLBAR … so far
Problem is that i really need to rotate and zoom the image. I read something about “canvas” and tried a little bit. It worked but not inside my WINDOW. I really don’t know how to include CANVAS to my dhtmlx WINDOW object. Would be sooooo great if someone can help me with this because it’s really really important.
Image is shown in a dhtmlX WINDOW with a dhtmlX TOOLBAR:
function showFileContent(file){
var allowdExt = ["jpeg","jpg"];
var re = new RegExp("[a-z0-9]+\\.([a-z]{1,5})$")
var arr = re.exec(file)
if(arr==null)
return;
if(RegExp.index!=-1){
for(var i = 0; i < allowdExt.length; i++){
if(RegExp.$1 == allowdExt[i]){
var x = new Image();
x.src = "../files/Objekt"+file;
dhxW = new dhtmlXWindows();
dhxW.setSkin("dhx_web");
dhxW.attachViewportTo("fullscreen");
foto[file] = dhxW.createWindow(file,0,0,650,540);
foto[file].center();
foto[file].setText(file);
foto[file].setModal(false);
foto[file].attachURL("../files/Objekt"+file);
ToolBar = dhxW.window(file).attachToolbar();
ToolBar.setIconsPath("../images/icons/");
ToolBar.setSkin('dhx_skyblue');
ToolBar.addButton("print", 0, "Drucken", "print.gif", "print_dis.gif");
ToolBar.addButton("rotate", 1, "Bild drehen", "Redo.png", "Redo.png");
ToolBar.addText("text_1", 2, "Zoom:");
ToolBar.addText("text_2", 3, "<?php echo round($scale*100, 0); ?>% (<?php echo round($scale, 2); ?>x)");
ToolBar.addButton("zoom_in", 4, "", "plus.png", "plus.png");
ToolBar.addButton("zoom_out", 5, "", "minus.png", "minus.png");
ToolBar.addButton("close", 6, "Schliessen", "Exit.png", "Exit.png");
ToolBar.addSeparator("s1", 1);
ToolBar.addSeparator("s1", 3);
ToolBar.addSeparator("s1", 8);
ToolBar.attachEvent("onClick", function(id) {
switch (id) {
case "print": window.print(); break;
case "rotate": drawCanvas(1,file); break;
case "zoom_in": drawCanvas(2,file); break;
case "zoom_out": drawCanvas(3,file); break;
case "close": window.foto[file].close(); break;
}
});
return;
}
}
alert("Dieser Dateityp wird nicht unterstützt !");
}
} CANVAS Function to rotate and zoom the image:
function drawCanvas(id,file){
var canvas = document.getElementById('foto');
var image = new Image();
image.onload = function() {
if(canvas.getContext) {
var c = canvas.getContext('2d');
c.clearRect(0, 0, canvas.width, canvas.height);
if (id == 1) {
c.translate(canvas.width/2, canvas.height/2);
c.rotate(15 * Math.PI/180);
c.translate(-canvas.width/2, -canvas.height/2);
}
if (id == 2) { c.scale(<?php echo $scale*1.4; ?>,<?php echo $scale*1.4; ?>); }
if (id == 3) { c.scale(<?php echo $scale*0.8; ?>,<?php echo $scale*0.8; ?>); }
c.drawImage(image, 0, 0);
}
}
image.src = '../files/Objekt'+file;
} Here i think is the big problem because i define
in the parent BODY part. How can i attach this part to dhtmlX WINDOW? My images are rotating and zooming but not inside the WINDOW.
<canvas id="foto" width="500" height="500">HTML 5 kompatibler Browser wird benötigt.</canvas>soooo thank you for any help