迅速:使相同颜色的半透明重叠线在相交时不会改变颜色 [英] Swift: Make translucent overlapping lines of the same color not change color when intersecting

问题描述

当前，我在屏幕上绘制了2条相同颜色的线，但它们的alpha值均小于1.当这些线相交时，相交线的颜色与其余几条线不同.以前有一篇文章解决了同样的问题:

Currently I have drawn 2 lines on the screen which are the same color but both have an alpha value less than 1. When these lines intersect, the intersection is a different color than the rest of the lines. There was a previous post addressing the same issue: swift drawing translucent lines, how to make overlapping parts not getting darker? However, this post wasn't sufficiently answered. I draw the lines currently like this:

    var points = [CGPoint]()

    points = [CGPoint(x: -100, y: 100), CGPoint(x: 100, y: -100)]
    let FirstLine = SKShapeNode(points: &points, count: points.count)
    FirstLine.strokeColor = UIColor.init(red: 0.25, green: 0.62, blue: 0.0, alpha: 0.5)
    FirstLine.lineWidth = 30
    addChild(FirstLine)

    points = [CGPoint(x: 100, y: 100), CGPoint(x: -100, y: -100)]
    let SecondLine = SKShapeNode(points: &points, count: points.count)
    SecondLine.strokeColor = UIColor.init(red: 0.25, green: 0.62, blue: 0.0, alpha: 0.5)
    SecondLine.lineWidth = 30
    addChild(SecondLine)

这是它的样子:

我理解为什么会发生这种情况，但是有什么方法可以使相交看起来一样，所以看起来好多了?

I understand why this occurs, but is there any way to make the intersection look the same so it looks much better?

我已决定实施@Confused的答案.但是，现在的问题是纹理始终居中于屏幕中间.这是一个示例:

I have decided to implement @Confused's answer. However, the problem now is that the texture always centres to the middle of the screen. This is an example:

红叉将指定的点连接在一起时，其位置正确.但是，一旦我使红十字成为纹理，它就始终居中于屏幕的中间(绿十字是作为纹理的红十字).我可以使用任何可以将纹理重新定位到正确位置的代码吗?注意:此代码不能仅用于本示例，我需要一个始终保持工作状态的代码，而不管红叉的位置如何.

The red cross is in its correct position as it is connecting the specified points together. However, once I make the red cross a texture, it always centres to the middle of the screen (the green cross is the red cross as a texture). Can I use any code that could re-position the texture to its correct position. Note: this code can't just work for this example, I need one that works all the time regardless of the red cross' position.

针对具有相同问题的人的最终编辑

首先，设置如下所示的所有内容:

First, setup everything like this:

var points = [CGPoint]()
let crossParent = SKNode()
addChild(crossParent)

请注意您必须创建纹理的父级SKNode，否则屏幕上的所有内容都将变为纹理，而不仅仅是您想要的节点.然后，将该父节点添加到场景中.

Please note THAT YOU MUST create a parent SKNode for the texture otherwise everything on the screen will become the texture and not just the node that you want. Then, add that parent node to the scene.

之后，创建所需的行(在本例中为绿色十字):

After, create the lines that you want (in this case the green cross):

//The first line of the green cross
points = [CGPoint(x: -300, y: 300), CGPoint(x: -100, y: 100)]
let FirstLine = SKShapeNode(points: &points, count: points.count)
FirstLine.strokeColor = UIColor.init(red: 0.25, green: 0.62, blue: 0.0, alpha: 1.0)
FirstLine.lineWidth = 30
crossParent.addChild(FirstLine)

记住到不，将您创建的第一行添加到场景中，而是添加到您在开始时创建的父级SKNode上.另外，将每条绘制线的Alpha值设置为1.0.然后添加其他行:

Remember to NOT add the first line that you create to the scene, but rather to the parent SKNode that you made at the beginning. Also, set the alpha value to 1.0 for every line that you draw. Then add your other lines:

//The second line of the green cross
points = [CGPoint(x: -100, y: 300), CGPoint(x: -300, y: 100)]
let SecondLine = SKShapeNode(points: &points, count: points.count)
SecondLine.strokeColor = UIColor.init(red: 0.25, green: 0.62, blue: 0.0, alpha: 1.0)
SecondLine.lineWidth = 30
FirstLine.addChild(SecondLine)

请注意，您必须将该行添加到第一行，而不是添加到场景中.如果要在添加第一行之后添加多个行，则将其添加到第一行，就像我在这里对每个连续行所做的一样 您添加的行.

Note that you MUST add that line to the first line like this and not to the scene. If you are adding more than one line after adding the first line, then add it to the first line like I have done here too for each consecutive line that you add.

现在，创建这样的纹理:

Now, create the texture like this:

 let tex = view?.texture(from: FirstLine)
 let cross = SKSpriteNode(texture: tex, color: .clear, size: (tex?.size())!)
 cross.alpha = 0.5
 addChild(cross)

完成此操作后，无论您叫十字还是纹理，您都可以像我在此所做的那样将alpha值更改为您喜欢的任何颜色，并且图像不会有变化的颜色.请记住，然后将那个纹理添加到场景中.

After doing this, whatever you call cross will be your texture, and you can change the alpha value like I have done here to anything you like and the image will not have varying colors. Remember to then add that texture to the scene.

最后，您可能会注意到纹理与原始放置点的位置不同.您可以像这样将其放回相同的位置:

Finally, you may notice that the texture is not in the same position as where you originally put the points. You can put it back into the same position like this:

cross.position = CGPoint(x: (FirstLine.frame.midX), y: (FirstLine.frame.midY))

希望这会有所帮助:)感谢@Confused提供程序的纹理部分:D

Hope this helps :) Thank you to @Confused for the texture part of the program :D

推荐答案

这是一项技术.它不能解决您的问题，也不能直接回答您的问题.取而代之的是，它提供了一种获得理想结果的方法，但是却没有您真正想要的线条的灵活性和内在本质.

This is a technique. It does not solve your problem, nor directly answer your question. Instead it offers a way to have the desired result, but without the flexibility and inherent nature of lines you actually want.

您可以使用任何数量的技术，利用任何数量的节点绘制的任何东西创建纹理.

You can create textures from anything you draw with any number of nodes, with any number of techniques.

通过将所有绘图元素附加到您有权访问的SKView空间内的单个节点上，然后将所绘制对象的父"节点渲染到纹理上，来执行此操作(最简单的方法).

You do this (easiest way) by attaching all the drawing elements to a single node, within an SKView space that you have access to, and then render the "parent" node of your drawn objects to a texture.

这有什么帮助?

很高兴你问:

您可以将所有内容绘制为100％的不透明度，然后将其渲染为纹理，然后将其作为图纸的纹理，将其放置在您喜欢的位置，并将其不透明度降低到您喜欢的任何百分比，并获得均匀的结果.彼此重叠的地方没有亮点.

You can draw everything at an opacity level of 100%, and render it to a texture, then take that texture of your drawings, put it where you like, and reduce its opacity to any percentage you like, and get an even result. No bright spots where things overlay each other.

这是完成以上所有操作的代码:

Here's code that does all the above:

   var points = [CGPoint]()

   points = [CGPoint(x: -100, y: 100), CGPoint(x: 100, y: -100)]
   let FirstLine = SKShapeNode(points: &points, count: points.count)
   FirstLine.strokeColor = UIColor.init(red: 0.25, green: 0.62, blue: 0.0, alpha: 1)
   FirstLine.lineWidth = 30
//      ^^ Note the FirstLine is not added to the Scene

   points = [CGPoint(x: 100, y: 100), CGPoint(x: -100, y: -100)]
   let SecondLine = SKShapeNode(points: &points, count: points.count)
   SecondLine.strokeColor = UIColor.init(red: 0.25, green: 0.62, blue: 0.0, alpha: 1)
   SecondLine.lineWidth = 30
   FirstLine.addChild(SecondLine)
// ^^ Note SecondLine being added to FirstLine, and that they both have alpha of 1

// Now the magic: use the view of the SKScene to render FirstLine and its child (SecondLine)
// They are rendered into a texture, named, imaginatively, "tex"

   let tex = view.texture(from: FirstLine)
   let cross = SKSpriteNode(texture: tex, color: .clear, size: (tex?.size())!)
       cross.alpha = 0.5

// ^^ The alpha of the above sprite is set to your original desire of 0.5
// And then added to the scene, with the desired result.
   addChild(cross)

---

结果如下:

---

and here's the result:

这篇关于迅速:使相同颜色的半透明重叠线在相交时不会改变颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！