I basically have a pie chart where I have lines coming out of each segment of the pie chart. So in the case where the line comes out of the circle to the left, when I draw my text, it is reversed. "100%" would look like => "%001" (Note, the 1 and % sign are actually drawn in reverse to, like if a mirror. So the little overhang on top of the 1 points to the right, rather than the left.)
I tried reading through Apple's docs for the AffineTransform, but it doesn't make complete sense to me. I tried making this transformation matrix to start:
CGAffineTransform transform1 = CGAffineTransformMake(-1, 0, 0, 1, 0, 0);
This does flip the text around its x-axis so the text now looks correct on the left side of the circle. However, the text is now on the line, rather than at the end of the line like it originally was. So I thought I could translate it by moving the text in the x-axis direction by changing the tx value in the matrix. So instead of using the above matrix, I used this:
CGAffineTransform transform1 = CGAffineTransformMake(-1, 0, 0, 1, -strlen(t1AsChar), 0);
However, the text just stays where it's at. What am I doing wrong? Thanks.
strlen() doesn't give you the size of the rendered text box, it just gives you the length of the string itself (how many characters that string has). If you're using a UITextField you can use textField.frame.size.width instead.
Related
Using EaselJS 1.0 I want to move a line. I can get this to work setting the x and y by incrementing and decrementing, but not by setting x and y directly to numbers. IOW - line.x++; works, but line.x = 300; does not work. The code editor here seems cranky, so in case I fail inserting code see two versions running online here:
http://www.clarksoncs.com/Gettysburg/testMovingLineAlt.html
http://www.clarksoncs.com/Gettysburg/testMovingLine.html
In the init function:
createjs.Ticker.addEventListener("tick", stage);
createjs.Ticker.addEventListener("tick", handleTick);
stage = new createjs.Stage("canvasOne");
line.graphics.setStrokeStyle(3);
line.graphics.beginStroke(color);
line.graphics.moveTo(300, 400);
line.graphics.lineTo(startX, startY);
line.graphics.endStroke();
stage.addChild(line);
stage.update();
in the tick event:
//Run these two lines: Expected = line moves right and up. Actual = line moves right and up AND GETS LONGER.
line.x++;
line.y--;
/*
Run these two lines: Expected = line appears centered at 600,600. Actual = line is not visible. Check debugger, x and y are set to 600.
line.x = 600;
line.y = 600;
*/
stage.update();
I think the problem here might be that you are confusing the graphics coordinates with the line's position.
The line you are making is at [0,0]. Its registration point has not moved. You are then drawing the line from the internal coordinates of [300,400] to wherever your startX and startY are. The line position doesn't change because of the internal graphics coordinates.
My guess is that when you set the line to x=600, it is not visible because your graphics are now off-stage. The line position will be 600, but the line graphics start at 300 on top of that.
Here is a quick fiddle
https://jsfiddle.net/b01tsw42/1/
var line = new createjs.Shape();
line.graphics.setStrokeStyle(3);
line.graphics.beginStroke("#ff0000");
line.graphics.moveTo(0, 0);
line.graphics.lineTo(300, 400);
line.graphics.endStroke();
stage.addChild(line);
stage.x = 300; // sets the graphic container to x=300
I hope that helps!
Thanks! I think the easiest way to move a line shape is probably to put the line in a bitmap, and move the bitmap.
I have a Matlab script that creates a Model Block for each element i found in a text file.
The problem is that all Models are created on each other in the window. So i'm trying to make a loop like:
for each element in text file
I add a Model block
I place right to the previous one
end
So it can look like this:
As you can see on the left, all models are on each other and I would like to place them like the one on the right.
I tried this:
m = mdlrefCountBlocks(diagrammeName)+500;
add_block('simulink/Ports & Subsystems/Model',[diagrammeName '/' component_NameValue]);
set_param(sprintf('%s/%s',diagrammeName,component_NameValue), 'ModelFile',component_NameValue);
size_blk = get_param(sprintf('%s/%s',diagrammeName,component_NameValue),'Position');
X = size_blk(1,1);
Y = size_blk(1,2);
Width = size_blk(1,3);
Height = size_blk(1,4);
set_param(sprintf('%s/%s',diagrammeName,component_NameValue),'Position',[X+m Y X+Width Y+Height]);
Inside the loop but it returns an error Invalid definition of rectangle. Width and height should be positive.
Thanks for helping!
The position property of a block does actually not contain its width and height, but the positions of the corners on the canvas (see Common Block Properties):
vector of coordinates, in pixels: [left top right bottom]
The origin is the upper-left corner of the Simulink Editor canvas before any canvas resizing. Supported coordinates are between -1073740824 and 1073740823, inclusive. Positive values are to the right of and down from the origin. Negative values are to the left of and up from the origin.
So change your code to e.g.:
size_blk = get_param(sprintf('%s/%s',diagrammeName,component_NameValue),'Position');
set_param(sprintf('%s/%s',diagrammeName,component_NameValue),'Position', size_blk + [m 0 0 0]);
I generate a transparent chart that lets the background of a web page be seen through it.
So far I've done this (omited the populating of dataset for brevity):
lineChartObject=ChartFactory.createLineChart("Title","Legend","Amount",line_chart_dataset,PlotOrientation.VERTICAL,true,true,false);
CategoryPlot p = lineChartObject.getCategoryPlot();
Color trans = new Color(0xFF, 0xFF, 0xFF, 0);
lineChartObject.setBackgroundPaint(trans);
p.setBackgroundPaint(trans);
for (int i=0;i<=3;i++){
lineChartObject.getCategoryPlot().getRenderer().setSeriesStroke(i, new BasicStroke(3.0f));
lineChartObject.getCategoryPlot().getRenderer().setBaseItemLabelsVisible(false);
}
Which renders this:
I cannot find a way of:
Removing border of plot (1)
Removing border of leyend as well as making it transparent (3)
Making the labels on the X axis (2) to behave intelligently as the labels of Y axis do (A). Labels of Y axis space themselves so as to not clutter the graph, for example if I rendered the graph smaller, it would show fewer labels, like this:
Edit: X label domain is dates.
For (1) try:
plot.setOutlineVisible(false);
For (2), a common reason for having too many categories along the x-axis is that the data is actually numerical, in which case you should be using XYPlot rather than CategoryPlot. With XYPlot, the x-axis scale adjusts in the same way that the y-axis does.
Edit from OP: Using a TimeSeriesChart with a TimeSeriesCollection as XYDataSet did the work! (fotgot to say X domain is dates)
For (3) try:
LegendTitle legend = chart.getLegend();
legend.setFrame(BlockBorder.NONE);
legend.setBackgroundPaint(new Color(0, 0, 0, 0));
I want to draw UIimage with CGAffineTransform but It gives wrong output with CGContextConcatCTM
I have try with below code :
CGAffineTransform t = CGAffineTransformMake(1.67822, -1.38952, 1.38952, 1.67822, 278.684, 209.129); // transformation of uiimageview
UIGraphicsBeginImageContext(CGSizeMake(1024, 768));
CGContextRef imageContext = UIGraphicsGetCurrentContext();
CGContextDrawImage(imageContext, dragView.frame, dragView.image.CGImage);
CGContextConcatCTM(imageContext, t);
NSLog(#"\n%#\n%#", NSStringFromCGAffineTransform(t),NSStringFromCGAffineTransform(CGContextGetCTM(imageContext)));
Output :
[1.67822, -1.38952, 1.38952, 1.67822, 278.684, 209.129] // imageview transformation
[1.67822, 1.38952, 1.38952, -1.67822, 278.684, 558.871] // drawn image transformation
CGAffineTransform CGAffineTransformMake (
CGFloat a,
CGFloat b,
CGFloat c,
CGFloat d,
CGFloat tx,
CGFloat ty
);
Parameter b, d and ty changed, How to solve this?
There is no problem to solve. Your log output is correct.
Comparing the two matrixes, the difference between the two is this:
scale vertically by -1 (which affects two of the first four members)
translate vertically by 349.742 (which affects the last member)
I'm going to take a guess and say your view is about 350 points tall. Am I right? Actually, the 349.742 is weird, since you set the context's height to 768. It's almost half (perhaps because the anchor point is centered?), but well short, and cutting off the status bar wouldn't make sense here (and wouldn't account for a 68.516-point difference). So that is a puzzle. But, what follows is still true:
A vertical scale and translate is how you would flip a context. This context has gone from lower-left origin to upper-left origin, or vice versa.
That happened before you concatenated your (unexplained, hard-coded) matrix in. Assuming you didn't flip the context yourself, it probably came that way (I would guess as a UIKit implementation detail).
Concatenation (as in CGContextConcatCTM) does not replace the old transformation matrix with the new one; it is matrix multiplication. The matrix you have afterward is the product of both the matrix you started with and the one you concatenated onto it. The resulting matrix is both flipped and then… whatever your matrix does.
You can see this for yourself by simply getting the CTM before you concatenate your matrix onto it, and logging that. You should see this:
[0, -1, 0, -1, 0, 349.742]
See also “The Math Behind the Matrices” in the Quartz 2D Programming Guide.
I have a custom UIView which is drawn using its -[drawRect:] method.
The problem is that the anti-aliasing acts very weird as black lines horizontal or vertical lines are drawn very blurry.
If I disable anti-aliasing with CGContextSetAllowsAntialiasing, everything is drawn as expected.
Anti-Aliasing:
alt text http://dustlab.com/stuff/antialias.png
No Anti-Aliasing (which looks like the expected result with AA):
alt text http://dustlab.com/stuff/no_antialias.png
The line width is exactly 1, and all coordinates are integral values.
The same happens if I draw a rectangle using CGContextStrokeRect, but not if I draw exactly the same CGRect with UIRectStroke.
Since a stroke expands equal amounts to both sides, a line of one pixel width must not be placed on an integer coordinate, but at 0.5 pixels offset.
Calculate correct coordinates for stroked lines like this:
CGPoint pos = CGPointMake(floorf(pos.x) + 0.5f, floorf(pos.y) + 0.5f);
BTW: Don't cast your values to int and back to float to get rid of the decimal part. There's a function for this in C called floor.
in your view frames, you probably have float values that are not integers. While the frames are precise enough to do fractions of a pixel (float), you will get blurriness unless you cast to an int
CGRect frame = CGRectMake((int)self.frame.bounds..., (int)...., (int)...., (int)....);