Question

我正在尝试将4个UIView子视图添加到UIImageView。这些子视图用作用户可以点击它们并连接到其他节点的节点。例如，他们应该看 like this。相反，他们正在寻找like this。

我计算节点位置的代码如下：

return

我的UIView类初始化代码如下：

...
data() {
  return {
    ws1:  null,
    ws2:  null,
  }
},
mounted() {
  this.startStream1()
  this.startStream2()
},
methods: {
  startStream1 () {
    let vm           = this
    vm.ws1           = new WebSocket("wss://somepath1")
    vm.ws1.onmessage = function (event) {
      vm.$store.dispatch("handleStream", JSON.parse(event.data))

    }
    vm.ws1.onerror   = function (error) {
      console.log(error)
    }
  },
  closeStream1 () {
    this.ws1 && this.ws1.close()
  },
  startStream2() {
    let vm          = this
    vm.ws2          = new WebSocket("wss://somepath2")
    ...
  },
  ...
}

有趣的是，如果我只是将CAShapeLayer作为子图层添加到我的UIImageView中，它看起来应该是这样。但是，我需要将其实现为UIView，以便我可以轻松使用手势识别器。我通过在初始化器中将坐标除以100来找到一种肮脏的修复方法，如下所示：

func initializeConnectionNodes() {
        let imageCenter = self.imageView.center
        let xOffset = self.imageView.bounds.width/2 //distance from origin x-wise
        let yOffset = self.imageView.bounds.height/2 //distance from origin y-wise
        self.leftConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: imageCenter.x - xOffset, y: imageCenter.y))
        self.rightConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: imageCenter.x + xOffset, y: imageCenter.y))
        self.topConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: imageCenter.x, y: imageCenter.y + yOffset))
        self.bottomConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: imageCenter.x, y: imageCenter.y - yOffset))

        self.imageView.addSubview(self.leftConnectionNode!)
        self.imageView.addSubview(self.rightConnectionNode!)
        self.imageView.addSubview(self.topConnectionNode!)
        self.imageView.addSubview(self.bottomConnectionNode!)
}

但是，我宁愿正确地做到这一点。我在这里错过了什么？谢谢你的帮助。

Answer 1

您要将视图添加到图片视图中，但imageCenter点是根据图片视图的 superview 给出的。

使用以下内容替换initializeConnectionNodes函数的开头：

let xCenter = imageView.bounds.width / 2
let yCenter = imageView.bounds.height / 2

leftConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: 0, y: yCenter))
rightConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: imageView.bounds.width, y: yCenter))
topConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: xCenter, y: 0))
bottomConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: xCenter, y: imageView.bounds.height))

此外，您应该使用circlePath替换ConnectionNodeView子类中CGPoint.zero的弧形中心，因为它适用于节点视图本身的坐标系：

let circlePath = UIBezierPath(arcCenter: .zero, radius: 8, startAngle: 0, endAngle:CGFloat(Double.pi * 2), clockwise: true)

UIView子视图被置于意外位置（Swift 4）

1 个答案: