I'm working with dojox.drawing.Drawing to create a simple diagramming tool. I have created a custom tool to draw rounded rectangle by extending dojox.drawing.tools.Rect as shown below -
dojo.provide("dojox.drawing.tools.custom.RoundedRect");
dojo.require("dojox.drawing.tools.Rect");
dojox.drawing.tools.custom.RoundedRect = dojox.drawing.util.oo.declare(
dojox.drawing.tools.Rect,
function(options){
},
{
customType:"roundedrect"
}
);
dojox.drawing.tools.custom.RoundedRect.setup = {
name:"dojox.drawing.tools.custom.RoundedRect",
tooltip:"Rounded Rect",
iconClass:"iconRounded"
};
dojox.drawing.register(dojox.drawing.tools.custom.RoundedRect.setup, "tool");
I was able to add my tool to the toolbar and use it to draw a rectagle on canvas. Now, I would like to customize the rectangle created by my custom tool to have rounded corners, but I'm not able to figure out how.
I have checked the source of dojox.drawing.tools.Rect class as well as it's parent dojox.drawing.stencil.Rect class and I can see the actual rectangle being created in dojox.drawing.stencil.Rect as follows -
_create: function(/*String*/shp, /*StencilData*/d, /*Object*/sty){
// summary:
// Creates a dojox.gfx.shape based on passed arguments.
// Can be called many times by implementation to create
// multiple shapes in one stencil.
//
//console.log("render rect", d)
//console.log("rect sty:", sty)
this.remove(this[shp]);
this[shp] = this.container.createRect(d)
.setStroke(sty)
.setFill(sty.fill);
this._setNodeAtts(this[shp]);
}
In dojox.gfx, rounded corners can be added to a a rectangle by setting r property.
With this context, could anybody please provide answers to my following questions?
What's the mechanism in dojox.drawing to customize the appearance of rectangle to have
rounded corners?
In the code snippet above, StencilData is passed to createRect call. What's the mechanism to customize this data? Can the r property of a rectangle that governs rounded corners be set in this data?
Adding rounded rectangles programmatically is easy. In the tests folder you'll find test_shadows.html which has a line that adds a rectangle with rounded corners:
myDrawing.addStencil("rect", {data:{x:50, y:175, width:100, height:50, r:10}});
You create a data object with x,y,width,height, and a value for r (otherwise it defaults to 0).
If you wanted to do it by extending rect, the easiest way to do it would just be to set the value in the constructor function (data.r=10, for example), or you could create a pointsToData function to override Rect's version. Either you would have set the value for this.data.r, or the default:
pointsToData: function(/*Array*/p){
// summary:
// Converts points to data
p = p || this.points;
var s = p[0];
var e = p[2];
this.data = {
x: s.x,
y: s.y,
width: e.x-s.x,
height: e.y-s.y,
r:this.data.r || 10
};
return this.data;
},
In that example I give r the value 10 as the default, instead of 0 as it was before. This works because every time stencil goes to draw your rect, it converts canvas x,y points (all stencils remember their points) to data (which gfx uses to draw). In other words this function will always be called before rect renders.
Related
There is a good tutorial on how to achieve this in Odoo-8 here:
Tutorial , but it doesn't work on Odoo-12.
Odoo natively allows you to set a field of your model as a basis for color differentiation in calendar view.
<calendar ... color="your_model_field">
The problem is that he will decide automagically what color to assign to every value.
I need to be able to decide what color mapping to use.
Doing some diving in the web module js files, more specifically on
web/static/src/js/views/calendar/calendar_renderer.js on line 266
I found a promising function which appears to be the one responsible for deciding which color to set.
getColor: function (key) {
if (!key) {
return;
}
if (this.color_map[key]) {
return this.color_map[key];
}
// check if the key is a css color
if (typeof key === 'string' && key.match(/^((#[A-F0-9]{3})|(#[A-F0-9]{6})|((hsl|rgb)a?\(\s*(?:(\s*\d{1,3}%?\s*),?){3}(\s*,[0-9.]{1,4})?\))|)$/i)) {
return this.color_map[key] = key;
}
var index = (((_.keys(this.color_map).length + 1) * 5) % 24) + 1;
this.color_map[key] = index;
return index;
},
This function is fed the value of your field (for every calendar event) and returns the color to be used "supposedly" as background for the calendar event square.
According to the second if statement, if you manage to instantiate the CalendarRenderer class with a color_map object which has the possible values of your field as keys and color codes as values you should be ok.
According the the third if statement, if the values of your field are strings with color codes (#FFF, rgb(x, y, z) , etc) they will be set in the color_map object and returned to be used as background colors.
The last part I guess is how odoo decides on a color when no mapping is provided.
I tried both approaches with the same efect:
Image displaying the calendar view
Namely, all the calendar events are rendered with the default color taken from the fullcalendar.css stylesheet (line 529), but the color reference displays correctly on the sidebar to the right.
I would appreciate any light shed on this matter, It has to be possible to make this work!.
Thanks.
I am using iOS Charts (Daniel Gindi) to generate graphs in an iOS app and I want to be able to generate a PDF report with those graphs included in the body of the report. Can anyone explain how to go about doing this. Ideally I don't want to generate an image from the UIView that shows in the app because the size/resolution would not be suitable for the PDF document.
As I understand it there are a few options:
use the graphics context for the pdf document to draw the graph on - it's not clear whether this would be possible when using the Charts library
use a UIView somehow to generate the graph and generate a PDF image data from that, embed this image into the pdf report
It seems like option 1 is probably the preferred way to get best resolution/control - somewhat speculative - doing it this way means you should be able to specify the exact position and size and get the correct font sizes, line thicknesses, etc..
Using option 2 means you have to figure out the scaling between a UIView and the PDF page view and I am not sure how these would map to each other.
Can anyone provide any suggestions on the following:
Is it possible to use Charts to generate graphs in a PDF document, and if so how?
If not what other options are there, short of writing custom drawing code.
OK so here is what I have done
Option 1: Using a UIView.layer to render on the PDF CGContect
func drawLineGraph(x: CGFloat, y: CGFloat)->CGRect{
let width = (pageSize.width - 2*kBorderInset - 2*kMarginInset)/2.0 - 50.0
let renderingRect = CGRect(x: x, y: y + 50.0, width: width, height: 150.0)
// Create a view for the Graph
let graphController = LineChartController(rect: renderingRect, building: self.building)
if let currentContext = UIGraphicsGetCurrentContext() {
let frame = graphController.chartView.frame
currentContext.saveGState()
currentContext.translateBy(x:frame.origin.x, y:frame.origin.y);
graphController.chartView.layer.render(in: currentContext)
currentContext.restoreGState()
}
return renderingRect
}
The graphController is just an object that has essentially the same function as the usual parent ViewController that would contain the graph. Sets the graph parameters and data.
Once that has been done the function below is called to render on the PDF page context.
A bit of translation required to put the graphs in the correct position.
Option 2: Drawing on the PDF Page CGContect
And the solution is...ta da...
func drawBarGraph(x: CGFloat, y: CGFloat)->CGRect{
let width = (pageSize.width - 2*kBorderInset - 2*kMarginInset)/2.0 - 50.0
let renderingRect = CGRect(x: x + width + 50, y: y + 50.0, width: width, height: 150.0)
// Create a view for the Graph
let graphController = BarChartController(rect: renderingRect, building: self.building)
if let currentContext = UIGraphicsGetCurrentContext() {
let frame = graphController.chartView.frame
currentContext.saveGState()
currentContext.translateBy(x:frame.origin.x, y:frame.origin.y)
//graphController.chartView.layer.render(in: currentContext)
graphController.chartView.draw(frame)
currentContext.restoreGState()
}
return renderingRect
}
Since the current context is set to the PDF page's context just call the charts draw() function directly passing the frame rectangle.
What have I missed here, can it be this easy ?
You can find a copy of the generated PDF here as well as sample code.
I implemented drag and drop of images and now i want to constrain proportions of images while resizing.
/**
* Variable: constrainChildrenOnResize
*
* Specifies if children should be constrained according to the <constrainChildren>
* switch if cells are resized (including via <foldCells>). Default is false for
* backwards compatiblity.
*/
mxGraph.prototype.constrainChildrenOnResize = false;
i set this to true but its not working :s
What API/property i need for this functionality..
constrainChildrenOnResize is responsible for positioning and size of the children of resized cell. It means that children should keep their position relatively to the parent-cell.
In your case I would suggest to extend mxVertexHandler using union method. In this example you can see how to implement min-width/min-height restrictions. Using this example you are able to write your own rules for constrain.
Here is my simple solution:
var vertexHandlerUnion = mxVertexHandler.prototype.union;
mxVertexHandler.prototype.union = function (bounds) {
var result = vertexHandlerUnion.apply(this, arguments);
var coff = bounds.width / bounds.height
result.width = result.height * coff;
return result;
};
So this function is called every time you move mouse during dragging the resizer.
bounds - object, always same and represent old geometry of the cell (before resizing)
result - object, represents new values, which are going to be applied. Between this line ad return statement you can place any code you need to modify result.
In my simple example I just get the initial relation between width and height of the cell (coff) and then set new width by multiplying coff and new height. It will work if you drag corner or top/bottom. In real project this logic should be slightly extended, or you should make visible only corner handlers.
By the way, this code will work for all resizable cells on your graph. If you want to apply it only to images or some other kind of cells - you can put condition and check the cell type before recalculating. You can get current cell or its state via this.state.cell or this.state inside of union function.
For example only for vertecies:
... ...
var result = vertexHandlerUnion.apply(this, arguments);
if (this.state.cell.isVertex()) {
//calculations here
}
return result;
the rect should be alpha=0.1 once the circle touches the rect . but if statement not working . it becomes 0.1 opacity without hitting
/* js
var circle = new lib.mycircle();
stage.addChild(circle);
var rect = new lib.myrect();
stage.addChild(rect);
rect.x=200;
rect.y=300;
circle.addEventListener('mousedown', downF);
function downF(e) {
stage.addEventListener('stagemousemove', moveF);
stage.addEventListener('stagemouseup', upF);
};
function upF(e) {
stage.removeAllEventListeners();
}
function moveF(e) {
circle.x = stage.mouseX;
circle.y = stage.mouseY;
}
if(circle.hitTest(rect))
{
rect.alpha = 0.1;
}
stage.update();
*/
The way you have used hitTest is incorrect. The hitTest method does not check object to object. It takes an x and y coordinate, and determines if that point in its own coordinate system has a filled pixel.
I modified your example to make it more correct, though it doesn't actually do what you are expecting:
circle.addEventListener('pressmove', moveF);
function moveF(e) {
circle.x = stage.mouseX;
circle.y = stage.mouseY;
if (rect.hitTest(circle.x, circle.y)) {
rect.alpha = 0.1;
} else {
rect.alpha = 1;
}
stage.update();
}
Key points:
Reintroduced the pressmove. It works fine.
Moved the circle update above the hitTest check. Otherwise you are checking where it was last time
Moved the stage update to last. It should be the last thing you update. Note however that you can remove it completely, because you have a Ticker listener on the stage in your HTML file, which constantly updates the stage.
Added the else statement to turn the alpha back to 1 if the hitTest fails.
Then, the most important point is that I changed the hitTest to be on the rectangle instead. This essentially says: "Is there a filled pixel at the supplied x and y position inside the rectangle?" Since the rectangle bounds are -49.4, -37.9, 99, 76, this will be true when the circle's coordinates are within those ranges - which is just when it is at the top left of the canvas. If you replace your code with mine, you can see this behaviour.
So, to get it working more like you want, you can do a few things.
Transform your coordinates. Use localToGlobal, or just cheat and use localToLocal. This takes [0,0] in the circle, and converts that coordinate to the rectangle's coordinate space.
Example:
var p = rect.localToLocal(0, 0, circle);
if (rect.hitTest(p.x, p.y)) {
rect.alpha = 0.1;
} else {
rect.alpha = 1;
}
Don't use hitTest. Use getObjectsUnderPoint, pass the circle's x/y coordinate, and check if the rectangle is in the returned list.
Hope that helps. As I mentioned in a comment above, you can not do full shape collision, just point collision (a single point on an object).
This is an experiment with KineticJS and its goal is to simply keep an objected centered in the screen, as the window gets resized.
It works fine except that it doesn't center the object (a circle) at the initial resize event handler call. As I start resizing - and keep doing it - the circle gets centered. But initially the circle starts at the top left corner of the screen (0,0).
$(document).ready( function(){
$(window).resize(onResize);
var stage = new Kinetic.Stage({
container: 'container',
width: $(container).width(),
height: $(container).height()
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ radius: 70, fill: 'red' });
layer.add(circle);
stage.add(layer);
function onResize(){
$(container).css('height', window.innerHeight - 20);
stage.setWidth($(container).width());
stage.setHeight($(container).height());
updatePosition();
}
function updatePosition(){
circle.setPosition(stage.getWidth() / 2, stage.getHeight() / 2);
}
// initial call
onResize();
});
Any clue on why that happens? Thanks
http://jsfiddle.net/ME2cX/2
Yeah, you are missing a call to draw the stage after the onResize function is called.
Your order of events is to add things to the stage, then place the circle in the center, but the stage (or layer) needs to be drawn again to account for the new position of the circle.
In the jsfiddle, I placed 3 draw functions, I recommend you choose one of the
layer.draw()
functions rather than the
stage.draw();