如何使用非矩形按钮创建透明窗口? [英] How to create a transparent window with non-rectangular buttons?

问题描述

我希望制作一个看起来像这样的自定义窗口(更不用说快速的 photoshop)了:

I am looking to make a custom window which would look something like this (never mind the quick photoshop):

我的主要问题不是让窗口透明(尽管我想任何信息都是受欢迎的！)，但我希望能够只点击按钮的可见部分.例如，如果我在5"左上角之外单击按钮，我希望它注册对1"的点击.按钮而不是5"按钮，即使我点击了按钮 5 的边界框.如果我点击1"旁边的按钮的左上角角"，我希望它点击窗口下方的任何东西，而不是按钮.我还需要能够调整此窗口的大小，并且按钮中的图片应随之调整大小.

The main problem I have is not to make the window transparent (although I guess any info is welcome!), but that I want to be able to click only on the visible part of the buttons. For example, if I click just outside the top left of the "5" button, I want it to register a click on the "1" button and not the "5" button, even though I clicked in button 5's bounding box. And if I click just ouside of the "1" button's top left "corner", I want it to click on whatever is beneath my window and not on the button. I also need to be able to resize this window and the pictures in the buttons should resize with them.

我想使用一个透明的 NSWindow 和透明的 NSButtons，其中每个按钮都包含带有 alpha 的 PNG，但我认为重叠的按钮会是一个问题.

I was thinking of using a transparent NSWindow with transparent NSButtons containing PNGs with alpha for each button but I think the overlapping buttons will be a problem.

我还听说过像 Bowtie、SweetFM 和其他使用 WebKit 来显示其界面的应用程序.如果至少 10.3 有这种可能性，那会很有趣，但我也不知道那会如何运作.

I have also heard about applications like Bowtie, SweetFM and others using WebKit to display their interfaces. If that is a possibility on at least 10.3 that would be interesting, but I don't know how that would work either.

我环顾四周寻找点击蒙版、区域或类似的东西，但我还没有找到任何东西.我会在找到更多信息后更新这篇文章(如果我这样做了！).

I looked around for click masks, areas or something like that but I haven't found anything yet. I will update this post as I find more info (if I do!).

关于如何进行的任何提示?

Any hints on how to proceed?

(请注意，我正在使用 10.4，理想情况下我也需要支持一些旧版本的 Mac OS X.)

(Note that I am working on 10.4 and ideally I need to support some older versions of Mac OS X too.)

(另外，我在 Apple 的开发网站上找到了圆形窗口"示例，但它不再在 10.4 上运行，所以我不确定这是要走的路.)

(Also, I found the "rounded window" example on Apple's dev. site but it doesn't run on 10.4 anymore so I'm not sure this is the way to go.)

提前致谢！

(见更新 2，此问题现已修复)

好的，现在我遇到了一个稍微不同(但并非无关)的问题.到目前为止，我所做的是:

OK now I'm having a slightly different (but not unrelated) issue. What I did so far is this:

我选择制作一个可以用于我的每个按钮的自定义控件:

I opted for making a custom control that I'll be able to use for each of my buttons:

1- 子类化 NSControl 并覆盖 drawRect、mouseUp、mouseDragged 和 mouseDown.这样我就可以在拖动按钮(移动窗口)时获得我想要的行为.

1- Subclass NSControl and override drawRect, mouseUp, mouseDragged and mouseDown. This way I can get the behavior I want when dragging on a button (move the window).

2- 将每个按钮状态(形状相同但颜色变暗)的图像加载到 NSImages 中，并在必要时使用 compositeToPoint:fromRect:operation: 将它们绘制到视图中.图像是从 Photoshop 导出的 185 x 185 像素带有 alpha 的 PNG 文件.

2- Load images for each button states (same shape but one is darkened) into NSImages and draw them into the view using compositeToPoint:fromRect:operation: when necessary. The images are 185 x 185 pixels PNG files with alpha exported from Photoshop.

3- 获取 NSImage 的位图表示:

3- Get the NSImage's bitmap representation:

NSBitmapImageRep *bitRep = [[NSBitmapImageRep imageRepWithData:[unpressedImage TIFFRepresentation]] retain];

OR

NSBitmapImageRep *bitRep = [[unpressedImage representations] objectAtIndex:0];

两者似乎都给出了相同的结果.我尝试将此位图表示合成到我的窗口上，以查看图像是否具有与原始图像相同的大小和外观，并且一切看起来都不错(您会在此枚举之后明白我为什么这样做......).

Both seem to give the same result. I tried compositing this bitmap rep onto my window to see if the image has same size and look as the original and all seems good (you'll see why I did that after this enumeration...).

4- 在鼠标事件方法中，我使用位图表示来获取特定点的 alpha 分量:

4- In the mouse event methods, I use the bitmap representation to get the alpha component for a particular point:

NSPoint mouse = [self convertPoint:[theEvent locationInWindow] fromView:nil]; // Returns the correct x and y positions on the control (i.e: between 0 and 185 for each axis).

NSColor *colorUnderMouse = [[[unpressedImage representations] objectAtIndex:0] colorAtX:mouse.x y:mouse.y];
float alpha = [colorUnderMouse alphaComponent];

然后我将 alpha 值打印到控制台，但我得到了非常奇怪的结果.乍一看，获取鼠标下的 alpha 分量和颜色似乎可行(返回的颜色和 alpha 在我的位图中)，但看起来颜色不是在 bitRep 中的正确点处获取的，或者 bitRep 中包含的图像失真(虽然我在窗口上合成 bitRep 时它没有失真，这很奇怪).我再次检查 x 和 y 鼠标坐标是否在 (0,185) 范围内，并且 NSBitmapImageRep 的大小也是 185 x 185.

Then I print the alpha value to the console but I am getting very weird results. Getting the alpha component and the color under the mouse seems to work at first glance (the colors and alpha returned are in my bitmap) but it looks like the color is not taken at the right point in the bitRep, or the image contained in the bitRep is distorted (it isn't distorted when I composite the bitRep on the window though, which is very strange). Again I double-checked the x and y mouse coordinates were in the (0,185) range and that the size of the NSBitmapImageRep is 185 x 185 too.

首先看起来 NSBitmapImageRep 与我的 NSImage 相比是水平翻转的.如果我翻转坐标，返回的值似乎基本正常(大部分形状似乎与返回的值相符)，但仍有部分图像返回错误值.

First it looks like the NSBitmapImageRep is flipped horizontally compared to my NSImage. If I flip my coordinates the values returned seem mostly OK (most of the shape seems to fit with the values returned) but there are still parts of the image which return wrong values.

我在这一点上一无所知，并且以前从未使用过 NSBitmapImageRep 之前也许我只是忘记指定有关我的图像的一些格式信息，这就是这些值关闭的原因.有人可以澄清一下吗?

I'm clueless at this point and having never worked with NSBitmapImageRep before maybe I just forgot to specify some format information about my image which would be why the values are off. Could someone clarify this please?

再次感谢！

好吧没关系，我发现了问题.我使用 setColor:atX:y: 方法在我的窗口上打印之前在 bitRep 上绘制一个彩色点，问题很明显:Y 坐标在 bitRep 中反转，但图像打印有好"方向.这意味着 bitRep 具有Windows 风格"的属性.左上角原点坐标系，而窗口具有笛卡尔坐标系(左下角)原点.只需反转我的 Y 坐标即可解决我在获取 alpha 分量和颜色时遇到的问题.

Ok never mind, I found the issue. I used the setColor:atX:y: method to draw a colored dot on the bitRep before printing it on my window and the issue was clear as day: the Y coordinate is reversed in the bitRep, but the image is printed with the "good" orientation. This means that the bitRep has "Windows-style" top-left origin coordinate system while the window has the cartesian coordinate system (bottom-left) origin. Simply reversing my Y coordinate fixed the issues I had getting the alpha component and color.

这一定是在文档的某个地方写的，很抱歉因为我缺乏研究而打扰你......！

This must have been written somewhere in the docs, sorry to have bothered you because of my lack of research...!

推荐答案

如何重写 NSResponder 事件方法 (mouseUp:, mouseDown:> 等)在您的自定义按钮中(大概您将子类化 NSControl 或 NSButton 来制作这些)?在这些方法中，您可以正确计算边界矩形(在本例中为圆形)，并使用点击的坐标进行简单的命中测试，以查看是否应处理点击.

What about overriding the NSResponder event methods (mouseUp:, mouseDown:, etc) in your custom buttons (presumably you'd be subclassing NSControl or NSButton to make these)? In those methods you could properly calculate your bounding rectangle (or circle, in this case) and do a simple hit test with the coordinates of the click to see if the click should be handled.

您也可以在 Apple 的事件处理文档中找到一些帮助，特别是关于 鼠标事件 和 自定义视图.

You might also be able to find some help in Apple's event handling docs, specifically about mouse events and custom views.

这篇关于如何使用非矩形按钮创建透明窗口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！