I was wondering if someone could please help. Basically I have some Objective C code below, does anyone know how I can attach this to a CAShapeLayer for Mac OS X not iOS?.
****//// Color Declarations
NSColor* fillColor = [NSColor colorWithCalibratedRed: 0 green: 0.886 blue: 0.886 alpha: 1];
NSColor* strokeColor = [NSColor colorWithCalibratedRed: 0 green: 0 blue: 0 alpha: 1];
//// Star Drawing
NSBezierPath* starPath = [NSBezierPath bezierPath];
[starPath moveToPoint: NSMakePoint(106, 91.5)];
[starPath lineToPoint: NSMakePoint(110.21, 82.56)];
[starPath lineToPoint: NSMakePoint(119.18, 86.7)];
[starPath lineToPoint: NSMakePoint(116.65, 77.15)];
[starPath lineToPoint: NSMakePoint(126.19, 74.56)];
[starPath lineToPoint: NSMakePoint(118.11, 68.86)];
[starPath lineToPoint: NSMakePoint(123.75, 60.75)];
[starPath lineToPoint: NSMakePoint(113.91, 61.58)];
[starPath lineToPoint: NSMakePoint(113.01, 51.74)];
[starPath lineToPoint: NSMakePoint(106, 58.7)];
[starPath lineToPoint: NSMakePoint(98.99, 51.74)];
[starPath lineToPoint: NSMakePoint(98.09, 61.58)];
[starPath lineToPoint: NSMakePoint(88.25, 60.75)];
[starPath lineToPoint: NSMakePoint(93.89, 68.86)];
[starPath lineToPoint: NSMakePoint(85.81, 74.56)];
[starPath lineToPoint: NSMakePoint(95.35, 77.15)];
[starPath lineToPoint: NSMakePoint(92.82, 86.7)];
[starPath lineToPoint: NSMakePoint(101.79, 82.56)];
[starPath closePath];
[fillColor setFill];
[starPath fill];
[strokeColor setStroke];
[starPath setLineWidth: 1];
[starPath stroke];****
Basically I use the application Paintcode and would like to create shapes then convert them to a CAShapeLayer that will be used to animate.
Any help would be greatly appreciated.
Regards.
CAShapeLayer's path property is a CGPathRef, but, unlike with iOS's [UIBezierPath CGPath], there surprisingly isn't any built-in method to convert an OSX NSBezierPath to a CGPathRef. However, in the Apple docs they post a snippet to do the conversion at https://developer.apple.com/library/mac/documentation/cocoa/Conceptual/CocoaDrawingGuide/Paths/Paths.html#//apple_ref/doc/uid/TP40003290-CH206-SW2:
#implementation NSBezierPath (BezierPathQuartzUtilities)
// This method works only in OS X v10.2 and later.
- (CGPathRef)quartzPath
{
int i, numElements;
// Need to begin a path here.
CGPathRef immutablePath = NULL;
// Then draw the path elements.
numElements = [self elementCount];
if (numElements > 0)
{
CGMutablePathRef path = CGPathCreateMutable();
NSPoint points[3];
BOOL didClosePath = YES;
for (i = 0; i < numElements; i++)
{
switch ([self elementAtIndex:i associatedPoints:points])
{
case NSMoveToBezierPathElement:
CGPathMoveToPoint(path, NULL, points[0].x, points[0].y);
break;
case NSLineToBezierPathElement:
CGPathAddLineToPoint(path, NULL, points[0].x, points[0].y);
didClosePath = NO;
break;
case NSCurveToBezierPathElement:
CGPathAddCurveToPoint(path, NULL, points[0].x, points[0].y,
points[1].x, points[1].y,
points[2].x, points[2].y);
didClosePath = NO;
break;
case NSClosePathBezierPathElement:
CGPathCloseSubpath(path);
didClosePath = YES;
break;
}
}
// Be sure the path is closed or Quartz may not do valid hit detection.
if (!didClosePath)
CGPathCloseSubpath(path);
immutablePath = CGPathCreateCopy(path);
CGPathRelease(path);
}
return immutablePath;
}
#end
You could paste in this category, and then set the shape on your layer with:
layer.path = [starPath quartzPath];
Related
I have created a line graph using highchart js .I want to set a grey color marker at the starting and a red colored mrker at the end of my graph.Is there a way to do it with highcharts?
In the load event (chart.events.load) you can extract first and last point from series. Then call update() function to modify fillColor parameter.
chart:{
events:{
load:function() {
var chart = this,
series = chart.series[0],
data = series.data,
len = data.length;
//first point
data[0].update({
marker:{
fillColor: 'gray'
}
},false);
//last point
data[len - 1].update({
marker:{
fillColor: 'red'
}
});
}
}
},
Example:
http://jsfiddle.net/s9erv8f0/
I followed this tutorial to create a drawing application. It all works really well at making smooth curves. The problem is that as I draw the line is black, and once I let go it makes the line the colour that I want. The tutorial does not go into line colour, but I have altered it. The only problem is that it's black until touchesEnded runs.
Here is my code:
This first section sets the colour to black.
- (id)initWithCoder:(NSCoder *)aDecoder
{
if (self = [super initWithCoder:aDecoder])
{
[self setMultipleTouchEnabled:YES];
path = [UIBezierPath bezierPath];
[path setLineWidth:10.0];
red = 0.0/255.0;
green = 0.0/255.0;
blue = 0.0/255.0;
brush = 10.0;
opacity = 0.8;
toolSelected = 1;
bgImage = 1;
}
return self;
}
Then on touchesEnded this code is ran:
- (void)drawBitmap
{
UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 0.0);
if (!incrementalImage) // first time; paint background white
{
UIBezierPath *rectpath = [UIBezierPath bezierPathWithRect:self.bounds];
[[UIColor clearColor] setFill];
[rectpath fill];
}
[incrementalImage drawAtPoint:CGPointZero];
UIColor *colour = [UIColor colorWithRed:red green:green blue:blue alpha:opacity];
[colour setStroke];
[path stroke];
incrementalImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
I assume that something needs to be ran in the touchesMoved to colourise the bezier path, but I'm just really struggling with it right now.
Can anyone help?
Thanks
It was achieved in the end by adding these two lines to this section
- (void)drawRect:(CGRect)rect
{
[[UIColor redColor]setStroke]; // Added these
[[UIColor redColor]setFill]; // two lines
[incrementalImage drawInRect:rect];
[path stroke];
}
I use the KLCPopup library to display a popup in my app.
I have to add 2 buttons horizontally on the bottom of this popup, like the standard iOS UIAlerView. I cannot align this two buttons horizontally.
Here is the result I want:
But here is the result I have:
Here is the code I use to create this popup:
UIView* contentView = [[UIView alloc] init];
contentView.translatesAutoresizingMaskIntoConstraints = NO;
UILabel* dismissLabel = [[UILabel alloc] init];
dismissLabel.translatesAutoresizingMaskIntoConstraints = NO;
dismissLabel.numberOfLines = 0;
[dismissLabel setTextAlignment:NSTextAlignmentCenter];
dismissLabel.lineBreakMode = NSLineBreakByWordWrapping;
dismissLabel.preferredMaxLayoutWidth = 200;
UIButton* dismissButton = [UIButton buttonWithType:UIButtonTypeCustom];
dismissButton.translatesAutoresizingMaskIntoConstraints = NO;
dismissButton.contentEdgeInsets = UIEdgeInsetsMake(10, 20, 10, 20);
[contentView addSubview:dismissLabel];
[contentView addSubview:dismissButton];
UIButton* cancelButton = [UIButton buttonWithType:UIButtonTypeCustom];
cancelButton.translatesAutoresizingMaskIntoConstraints = NO;
cancelButton.contentEdgeInsets = UIEdgeInsetsMake(10, 20, 10, 20);
[contentView addSubview:cancelButton];
NSDictionary* views = NSDictionaryOfVariableBindings(contentView, dismissButton, cancelButton, dismissLabel);
[contentView addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-(16)-[dismissLabel]-(16)-[dismissButton]-(16)-[cancelButton]-(16)-|"
options:NSLayoutFormatAlignAllCenterX
metrics:nil
views:views]];
[contentView addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-(18)-[dismissLabel]-(18)-|"
options:0
metrics:nil
views:views]];
// Show in popup
KLCPopupLayout layout = KLCPopupLayoutMake(KLCPopupHorizontalLayoutCenter,
KLCPopupVerticalLayoutCenter);
KLCPopup* popup = [KLCPopup popupWithContentView:contentView
showType:KLCPopupShowTypeFadeIn
dismissType:KLCPopupDismissTypeGrowOut
maskType:KLCPopupMaskTypeDimmed
dismissOnBackgroundTouch:NO
dismissOnContentTouch:NO];
[popup showWithLayout:layout];
I think the problem on my code is the constraint.I've tried many possibilities but I cannot find the right way to do this.
Any advice will be helpful!
Thanks
You've added all three views to the vertical constraint and that's why they are all one after another. Do something like this:
V:|-16-[dismissLabel]
V:|-80-[dismissButton]
V:|-80-[cancelButton]
H:|-18-[dismissLabel]-18-|
H:[dismissButton(50)]-100-[cancelButton(50)]
I haven't tested it but something like that could work. You might have to modify the last H value or maybe add a centering option to it. There are probably better ways where you could group some of those things but this should work too.
function highlightmarker(marker_id) {
//console.log("Highlight marker id: "+marker_id);
for (var i=0; i<markers.length; i++) {
if (markers[i].id == marker_id) {
map_markers[i].setAnimation(google.maps.Animation.BOUNCE);
}
}
}
This makes my map markers bounce up and down but I want them to grow instead.
I tried replacing the last line with this but it didn't work:
var img_height = 40;
var img_width = 40;
How do I make highlighted Google Map markers grow?
You could use a Icon (or a MarkerImage that's still supported but deprecated in favor of Icon) and use a the common marker image in it and set the appropriate size/scale you desire, for instance, assuming markers[i] points to a valid marker
var image = {
url: " http://www.google.com/mapfiles/marker.png",
size: new google.maps.Size(50, 50),
origin: null,
anchor: null,
scaledSize: new google.maps.Size(50, 50)
};
marker[i].setIcon(image);
for a more complete example I created a jsFiddle that sets the icon upon marker creation, http://jsfiddle.net/68gx9/
instead of
map_markers[i].setAnimation(google.maps.Animation.BOUNCE);
replace marker image with a new bigger one..
map_markers[i].setIcon(yourImageUrl);
How do I find the current zoom level when loading or clicking a Google map?
If you have a map object like this:
var mapObject = new google.maps.Map(document.getElementById("map"), _mapOptions);
use
mapObject.getZoom();
Use this code:
float zoomlevel = mMap.getCameraPosition().zoom;
If you need to get zoom on change
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
console.log(zoom);
});
I got it using:
console.log(this.map.zoom);
I'm using agm-angular-google-maps
html:
<agm-map (mapReady)="onMapReady($event)">
TS:
onMapReady(map) {
this.map = map;
}