i can use raphael test page (just playing @ moment) in firefox , ie 11 (eurgh). doesn't, however, work in chrome. i've checked console , no errors have been reported, raphael features won't work (adding rect, image).
so, firstly: 1. chromes support raphael different others?
secondly, i'll post code in case i've made huge error somewhere (left out html it's basic div).
//get background image var myimg = new image(); myimg.src = 'comp1.bmp'; var width = myimg.width; var height = myimg.height; var allshapes = []; var paper = new raphael("paper", width, height); //add background image var img = paper.image("comp1.bmp", 0, 0, width, height); var cw = width / 2; var ch = height / 2; var allshapes = []; var activerect; //this store rect used last. //drag , drop code function addnewshape(){ var rectdetails = {}; rectdetails.rect = paper.rect(cw - 50, ch - 50, 50, 50); rectdetails.rect.attr({ 'stroke': 'orange', 'fill': 'white', 'fill-opacity': 0, 'stroke-width': 2 }); //set resizer rectangle var resize = paper.rect(cw - 20, ch - 20, 20, 20); resize.attr({ fill: "orange", stroke: "none", opacity: .5 }); //assign rect resize.box = rectdetails.rect; resize.drag(move_resizer, start_resizer); rectdetails.rect.sizer = resize; rectdetails.rect.drag(drag_move, drag_start, drag_up); //add co-ordinate text box var div = document.getelementbyid('coordcontainer'); div.innerhtml = div.innerhtml + "shape " + rectdetails.rect.id + ": <input type='text' id='pos" + rectdetails.rect.id + "'>"; //add new shape shape coords array allshapes[rectdetails.rect.id] = rectdetails.rect; } function getcoords(){ var coorddiv = document.getelementbyid('resultscontainer'); for(var = 1; <= allshapes.length; i++) { var bbox = allshapes[i].getbbox(); var temp = "shape " + allshapes[i].id + ": x(" + bbox.x + "), y(" + bbox.y + ")"; coorddiv.innerhtml = coorddiv.innerhtml + temp; } } var ox = null; var oy = null; function drag_start(e) { //set active rect activerect = this; //assign attrs this.ow = this.attr('width'); this.oh = this.attr('height'); this.ox = this.attr('x'); this.oy = this.attr('y'); this.sizer.ox = this.sizer.attr("x"); this.sizer.oy = this.sizer.attr("y"); this.sizer.attr({opacity: 1}); }; //moving shape function drag_move(dx, dy, posx, posy) { document.getelementbyid("pos" + this.id).value = "x: " + dx + " | y: " + dy; //co-ordinates of shape! this.attr({ transform: "...t" + (dx - ox) + "," + (dy - oy) }); this.sizer.attr({x: this.sizer.ox + dx, y: this.sizer.oy + dy}); // store previous versions of dx,dy use in next move call ox = dx; oy = dy; } function drag_up(e) { //reset original positions ox = 0; oy = 0; } function start_resizer(){ // storing original coordinates this.ox = this.attr("x"); this.oy = this.attr("y"); this.box.ow = this.box.attr("width"); this.box.oh = this.box.attr("height"); } function move_resizer(dx, dy){ // move called dx , dy this.attr({x: this.ox + dx, y: this.oy + dy}); this.box.attr({width: this.box.ow + dx, height: this.box.oh + dy}); } nb: addshape() function called button. chrome shows div, it's content empty (white).
i have no idea issue code. received.
Comments
Post a Comment