Rounded WebView on OSX with Cordova?

I am building a Mac OSX application with Cordova-osx . I tried to implement all the solutions that I saw about rounded corners for my application, but none of them work. The last resource will remove the shadow and create corners using CSS, but I don't really like this approach.

So, this is the file responsible for creating the webview and loading it. And that was my approach:

- (void) awakeFromNib
{
    _commandDelegate = [[CDVCommandDelegateImpl alloc] initWithViewController:self];
    self.webViewDelegate.viewController = self;

    NSURL* appURL = nil;
    NSString* loadErr = nil;

    if ([self.startPage rangeOfString:@"://"].location != NSNotFound) {
        appURL = [NSURL URLWithString:self.startPage];
    } else if ([self.wwwFolderName rangeOfString:@"://"].location != NSNotFound) {
        appURL = [NSURL URLWithString:[NSString stringWithFormat:@"%@/%@", self.wwwFolderName, self.startPage]];
    } else {
        NSString* startFilePath = [self.commandDelegate pathForResource:self.startPage];
        if (startFilePath == nil) {
            loadErr = [NSString stringWithFormat:@"ERROR: Start Page at '%@/%@' was not found.", self.wwwFolderName, self.startPage];
            NSLog(@"%@", loadErr);
            self.loadFromString = YES;
            appURL = nil;
        } else {
            appURL = [NSURL fileURLWithPath:startFilePath];
        }
    }

    if (!loadErr) {
        NSURLRequest* appReq = [NSURLRequest requestWithURL:appURL cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:20.0];
        self.webView.layer.cornerRadius = 10;
        self.webView.layer.opaque = NO;

        [[self.webView mainFrame] loadRequest:appReq];

    } else {
        NSString* html = [NSString stringWithFormat:@"<html><body> %@ </body></html>", loadErr];
        [[self.webView mainFrame] loadHTMLString:html baseURL:nil];
    }

    for (NSString* pluginName in self.startupPluginNames) {
        [self getCommandInstance:pluginName];
    }

    // initialize items based on settings

    BOOL enableWebGL = [[self.settings objectForKey:@"EnableWebGL"] boolValue];
    WebPreferences* prefs = [self.webView preferences];

    // Note that this preference may not be Mac App Store safe
    if (enableWebGL && [prefs respondsToSelector:@selector(setWebGLEnabled:)]) {
        [prefs performSelector:@selector(setWebGLEnabled:) withObject:[NSNumber numberWithBool:enableWebGL]];
    }
}

This basically adds:

self.webView.layer.cornerRadius = 10;
self.webView.layer.opaque = NO;

This is the code I use to display the panel:

- (void) showPanel
{

    NSPoint mouseLocation = [NSEvent mouseLocation];

    NSEnumerator *screenEnumerator = [[NSScreen screens] objectEnumerator];
    NSScreen *screen;
    while ((screen = [screenEnumerator nextObject]) && !NSMouseInRect(mouseLocation, screen.frame, NO))
        ;

    NSRect statusFrame = [[self.statusItem valueForKey:@"window"] frame];
    NSRect winFrame = [self.window frame];
    NSRect screenFrame = [screen frame];

    NSPoint p = NSMakePoint(statusFrame.origin.x, screenFrame.size.height + screenFrame.origin.y - 32);


    if ((p.x + winFrame.size.width) > (screenFrame.origin.x + screenFrame.size.width)) {
        p.x = screenFrame.origin.x + screenFrame.size.width - winFrame.size.width - 30;
    }

    [self.window setFrameTopLeftPoint:p];
    [self.window setIsVisible:YES];
    [NSApp activateIgnoringOtherApps:YES];
    [self.window makeKeyAndOrderFront:self];
}

But it looks like there are no rounded corners in the frame. Any ideas?

+4
source share
1 answer

- , WebView . applicationDidFinishLaunching:

self.webView.wantsLayer = YES;
self.webView.layer.cornerRadius = 50.0f;
self.webView.layer.masksToBounds = YES;
[self.webView.mainFrame.frameView setAllowsScrolling:NO];

enter image description here

, , - , , ,

+2

Source: https://habr.com/ru/post/1525981/


All Articles