PDA

View Full Version : Draw rectangle over pdf image using extjs and repahael.js



rainyyadav
28 Aug 2013, 9:42 PM
Hi Everyone,

I have done rectangle demo using Extjs framework ext-3.0.0 and Raphael (latest version) which is working. But when I am trying to run rectangle demo with Extjs framework ext-4.2.0 and Raphael (latest version). I am getting error ' v.createDelegate is not a function' at line number 20. Below is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Raphel</title>
<link rel="stylesheet" type="text/css" href="/ext 4.2.0/resources/ext-all.css" />
<script type="text/javascript" src="/ext 4.2.0/ext-all-debug.js"></script>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">


Ext.ux.Raphael = Ext.extend(Ext.Component, {
onRender: function(ct) {
var p = this.paper = Raphael(ct.dom), v;
this.el = Ext.get(p.canvas);


// Export all methods from this paper object which will not override our native
// methods like setSize etc.
for (var prop in p) {
v = p[prop];
if (!this[prop] && Ext.isFunction(v)) {
this[prop] = v.createDelegate(p);
}
}


// We always cache our size
this.cacheSizes = true;
},


getWidth: function() {
return this.lastSize.width;
},


getHeight: function() {
return this.lastSize.height;
},


onResize: function(w, h) {
this.paper.setSize(w, h);
}
});
//Ext.reg('raphael', Ext.ux.Raphael);


Ext.onReady(function() {


var rect_test = new Ext.ux.Raphael();

new Ext.Window({
height: 650,
width: 600,
layout: 'fit',
autoScroll: true,
closable: false,
draggable : false,
items: rect_test
}).show();

var w = rect_test.getWidth();
var h = rect_test.getHeight();

drawRect(rect_test, w, h);

function drawRect(paper, w, h){
var shapeCount = 0;
var shapes = [];
var drawing = false;
xOffset = 2;
yOffset = 2;

var thecanvas = paper.image('http://www.w3.org/WAI/GL/WCAG20-TECHS/working-examples/PDF3/reflow1.jpg', 0, 0, w, h);

thecanvas.mousedown(function (e) {
get_mousepos(e);
shapes[shapeCount] = paper.rect(mousepos_x - xOffset, mousepos_y - yOffset, 0,0);
paper.image('delete.png', mousepos_x - xOffset, mousepos_y - yOffset, 15, 15);
drawing = true;
});

thecanvas.mousemove(function (e) {
if(drawing){
get_mousepos(e);
w = mousepos_x - xOffset - shapes[shapeCount].attr("x");
if (w < 1) w = 1;
h = mousepos_y - yOffset - shapes[shapeCount].attr("y");
if (h < 1) h = 1;
shapes[shapeCount].attr({width: w, height: h});
shapes[shapeCount].attr({fill:"black"});
}
});

thecanvas.mouseup(function (e) {
drawing = false;
shapeCount++;
});


function get_mousepos(event){
if (typeof event.x != 'undefined') {
mousepos_x=event.x;
mousepos_y=event.y;
}
if (typeof event.pageX != 'undefined') {
mousepos_x=event.pageX;
mousepos_y=event.pageY;
}
return {x:mousepos_x, y:mousepos_y};
}
}
});
</script>
</head>
<body>


</body>
</html>

Attaching images for working and not working demo page.

Please help.


Thanks
Rainy

Gary Schlosberg
30 Aug 2013, 4:01 PM
I don't see the attached images, but it seems like your problem is with Raphael, since createDelegate is not an ExtJS method.

rainyyadav
31 Aug 2013, 8:39 PM
Hi all,

Thanks for your's reply.

Here is attached demo images:

1. Working demo with Ext-3.0.0 framework.

45637

2. Error page with Ext-4.2 Framework
45636

Gary Schlosberg
3 Sep 2013, 8:35 AM
Thanks for the images. I believe I was incorrect about Raphael. It seems that createDelegate is no longer a part of ExtJS, but was an ExtJS 3.x function. Looks like you'll need to update your code, probably using Ext.bind (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext-method-bind).