Skip to content

Instantly share code, notes, and snippets.

@gossi
Created December 5, 2010 16:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gossi/729240 to your computer and use it in GitHub Desktop.
Save gossi/729240 to your computer and use it in GitHub Desktop.
JIT Node Extension: Advanced Rectangle with rounded borders
/**
* JIT Advanced Rectangle
*
* Usage
* =====
*
* Node: {
* overridable: true,
* type: "adv-rect",
* CanvasStyles: {
* fillStyle: "#F1F4F7", // background color
* strokeStyle: "#CCC", // border color
* lineWidth: 0.5,
* radius: 4
* }
* },
*
* @author Thomas Gossmann <http://gos.si>
*/
$jit.ST.Plot.NodeTypes.implement({
'adv-rect': {
'render': function(node, canvas) {
var width = node.getData('width'),
height = node.getData('height'),
pos = this.getAlignedPos(node.pos.getc(true), width, height),
posX = pos.x + width/2,
posY = pos.y + height/2,
radius = node.getCanvasStyle("radius"),
RoundRect = {
'render': function(type, pos, width, height, radius, canvas) {
var ctx = canvas.getCtx(),
x = pos.x - width/2,
y = pos.y - height/2;
ctx.beginPath();
ctx.moveTo(x,y+radius);
ctx.lineTo(x,y+height-radius);
ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
ctx.lineTo(x+width-radius,y+height);
ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
ctx.lineTo(x+width,y+radius);
ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
ctx.lineTo(x+radius,y);
ctx.quadraticCurveTo(x,y,x,y+radius);
ctx[type]();
}
};
if (radius > 0) {
RoundRect.render('fill', {x: posX, y: posY}, width, height, radius, canvas);
RoundRect.render('stroke', {x: posX, y: posY}, width, height, radius, canvas);
} else {
this.nodeHelper.rectangle.render('fill', {x: posX, y: posY}, width, height, canvas);
this.nodeHelper.rectangle.render('stroke', {x: posX, y: posY}, width, height, canvas);
}
},
'contains': function(node, pos) {
var width = node.getData('width') - (node.getCanvasStyle("lineWidth") ? node.getCanvasStyle("lineWidth") : 0),
height = node.getData('height') - (node.getCanvasStyle("lineWidth") ? node.getCanvasStyle("lineWidth") : 0),
npos = this.getAlignedPos(node.pos.getc(true), width, height);
return this.nodeHelper.rectangle.contains({x:npos.x+width/2, y:npos.y+height/2}, pos, width, height);
}
}
});
@SilviaIenciu
Copy link

Hi,
Can you please license this code of yours?
Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment