Почему в следующем сценарии обнаружение попадания / касания в более бездорожном тракте приводит к неточным результатам? - PullRequest
Новая
       36

Почему в следующем сценарии обнаружение попадания / касания в более бездорожном тракте приводит к неточным результатам?

1 голос
/ 03 мая 2019

Мне нужно обнаруживать касания в очень специфической области моего пользовательского интерфейса - клавиша пианино, которая находится под углом, выделена синим цветом, но, как я ее сейчас настраиваю, обнаружение неточно:

piano key image 1

Поскольку это не простой прямоугольник, я не могу просто использовать обычную кнопку. Вместо этого я решил использовать PaintCode plugin, чтобы создать путь Безье непосредственно из Sketch.

Прежде чем вы скажете, что этот вопрос является дубликатом: да, я знаю этот вопрос, который был задан ранее , и на самом деле я в значительной степени полагался на ответ Абхиманью Ратора и Диого Соузы, чтобы получить базовую функциональность. собирается.

Изображение эскиза состоит из 3 частей: blackKeyTop, blackKeySide и blackKeyBottom, поэтому PaintCode, по-видимому, создал 3 отдельных пути Безье: 

//
//  StyleKit.swift
//
//  Created on May 2, 2019.
//
//  Generated by PaintCode Plugin for Sketch
//  http://www.paintcodeapp.com/sketch
//

import UIKit

var currentBezierPath = UIBezierPath()

class StyleKit: NSObject {

    //MARK: - Canvas Drawings

    /// Page 1

    class func drawA5(frame targetFrame: CGRect = CGRect(x: 0, y: 0, width: 200, height: 516), resizing: ResizingBehavior = .aspectFit) {
        /// General Declarations
        let context = UIGraphicsGetCurrentContext()!
        let baseTransform = context.userSpaceToDeviceSpaceTransform.inverted()

        /// Resize to Target Frame
        context.saveGState()
        let resizedFrame = resizing.apply(rect: CGRect(x: 0, y: 0, width: 200, height: 516), target: targetFrame)
        context.translateBy(x: resizedFrame.minX, y: resizedFrame.minY)
        context.scaleBy(x: resizedFrame.width / 200, y: resizedFrame.height / 516)

        /// A#5 highlight
        do {
            context.saveGState()
            context.translateBy(x: 96.5, y: 260)
            context.scaleBy(x: -1, y: 1)
            context.translateBy(x: -87.5, y: -250)

            /// black key bottom
            let blackKeyBottom = UIBezierPath()
            blackKeyBottom.move(to: CGPoint(x: 66.43, y: 85.19))
            blackKeyBottom.addCurve(to: CGPoint(x: 72.75, y: 85.19), controlPoint1: CGPoint(x: 70.35, y: 85.49), controlPoint2: CGPoint(x: 72.46, y: 85.49))
            blackKeyBottom.addCurve(to: CGPoint(x: 72.04, y: 81.34), controlPoint1: CGPoint(x: 73.04, y: 84.89), controlPoint2: CGPoint(x: 72.8, y: 83.61))
            blackKeyBottom.addLine(to: CGPoint(x: 58.18, y: 21.72))
            blackKeyBottom.addCurve(to: CGPoint(x: 49.42, y: 7.99), controlPoint1: CGPoint(x: 54.67, y: 14.84), controlPoint2: CGPoint(x: 51.75, y: 10.26))
            blackKeyBottom.addCurve(to: CGPoint(x: 28.57, y: 0), controlPoint1: CGPoint(x: 43.73, y: 2.43), controlPoint2: CGPoint(x: 36.47, y: 0))
            blackKeyBottom.addCurve(to: CGPoint(x: 7.87, y: 8.55), controlPoint1: CGPoint(x: 20.59, y: 0), controlPoint2: CGPoint(x: 13.33, y: 3))
            blackKeyBottom.addCurve(to: CGPoint(x: 0, y: 21.2), controlPoint1: CGPoint(x: 5.71, y: 10.76), controlPoint2: CGPoint(x: 3.08, y: 14.97))
            blackKeyBottom.addLine(to: CGPoint(x: 1.33, y: 81.34))
            blackKeyBottom.addLine(to: CGPoint(x: 1.33, y: 85.66))
            blackKeyBottom.addLine(to: CGPoint(x: 4.33, y: 85.66))
            blackKeyBottom.addLine(to: CGPoint(x: 66.43, y: 85.19))
            blackKeyBottom.close()
            context.saveGState()
            context.translateBy(x: 2.09, y: 411.53)
            // Warning: Blur effects are not supported.
            blackKeyBottom.usesEvenOddFillRule = true
            context.saveGState()
            context.beginPath()
            context.addPath(blackKeyBottom.cgPath)
            context.addRect(blackKeyBottom.bounds.insetBy(dx: -74, dy: -74))
            context.clip(using: .evenOdd)
            context.translateBy(x: -147.87, y: 0)
            do {
                let baseZero = context.convertToDeviceSpace(CGPoint.zero).applying(baseTransform)
                let baseOne = context.convertToDeviceSpace(CGPoint(x: 1, y: 1)).applying(baseTransform)
                let baseOffset = context.convertToDeviceSpace(CGPoint(x: 147.87, y: 0)).applying(baseTransform)
                let shadowOffset = CGSize(width: baseOffset.x - baseZero.x, height: baseOffset.y - baseZero.y)
                let shadowBlur: CGFloat = 74 * min(baseOne.x - baseZero.x, baseOne.y - baseZero.y)
                context.setShadow(offset: shadowOffset, blur: shadowBlur, color: UIColor(hue: 0.616, saturation: 1, brightness: 1, alpha: 0.5).cgColor)
            }
            UIColor.black.setFill()
            blackKeyBottom.fill()
            context.restoreGState()
            blackKeyBottom.usesEvenOddFillRule = true
            UIColor(white: 0.847, alpha: 1).setFill()
            blackKeyBottom.fill()
            UIColor(hue: 0.622, saturation: 0.975, brightness: 0.831, alpha: 1).setFill()
            blackKeyBottom.fill()
            context.restoreGState()

            currentBezierPath.append(blackKeyBottom)

            /// black key side
            let blackKeySide = UIBezierPath()
            blackKeySide.move(to: CGPoint(x: 14.38, y: 498.36))
            blackKeySide.addLine(to: CGPoint(x: 15.36, y: 495.31))
            blackKeySide.addLine(to: CGPoint(x: 28.85, y: 422.78))
            blackKeySide.addLine(to: CGPoint(x: 111.37, y: 33.73))
            blackKeySide.addLine(to: CGPoint(x: 89.45, y: 0))
            blackKeySide.addLine(to: CGPoint(x: 11.65, y: 358.27))
            blackKeySide.addLine(to: CGPoint(x: 0.91, y: 408.5))
            blackKeySide.addLine(to: CGPoint(x: 0, y: 415.52))
            blackKeySide.addLine(to: CGPoint(x: 0.54, y: 422.78))
            blackKeySide.addLine(to: CGPoint(x: 5.44, y: 457.06))
            blackKeySide.addLine(to: CGPoint(x: 11.65, y: 492.02))
            blackKeySide.addLine(to: CGPoint(x: 14.38, y: 498.36))
            blackKeySide.close()
            context.saveGState()
            context.translateBy(x: 63.02, y: 1.09)
            // Warning: Blur effects are not supported.
            blackKeySide.usesEvenOddFillRule = true
            context.saveGState()
            context.beginPath()
            context.addPath(blackKeySide.cgPath)
            context.addRect(blackKeySide.bounds.insetBy(dx: -74, dy: -74))
            context.clip(using: .evenOdd)
            context.translateBy(x: -186.37, y: 0)
            do {
                let baseZero = context.convertToDeviceSpace(CGPoint.zero).applying(baseTransform)
                let baseOne = context.convertToDeviceSpace(CGPoint(x: 1, y: 1)).applying(baseTransform)
                let baseOffset = context.convertToDeviceSpace(CGPoint(x: 186.37, y: 0)).applying(baseTransform)
                let shadowOffset = CGSize(width: baseOffset.x - baseZero.x, height: baseOffset.y - baseZero.y)
                let shadowBlur: CGFloat = 74 * min(baseOne.x - baseZero.x, baseOne.y - baseZero.y)
                context.setShadow(offset: shadowOffset, blur: shadowBlur, color: UIColor(hue: 0.616, saturation: 1, brightness: 1, alpha: 0.5).cgColor)
            }
            UIColor.black.setFill()
            blackKeySide.fill()
            context.restoreGState()
            blackKeySide.usesEvenOddFillRule = true
            UIColor(hue: 0.622, saturation: 1, brightness: 0.745, alpha: 0.77).setFill()
            blackKeySide.fill()
            context.restoreGState()

            currentBezierPath.append(blackKeySide)

            /// black key top
            let blackKeyTop = UIBezierPath()
            blackKeyTop.move(to: CGPoint(x: 8.55, y: 376.64))
            blackKeyTop.addLine(to: CGPoint(x: 1.08, y: 409.47))
            blackKeyTop.addLine(to: CGPoint(x: 0, y: 425.43))
            blackKeyTop.addLine(to: CGPoint(x: 0.6, y: 437.48))
            blackKeyTop.addCurve(to: CGPoint(x: 6.37, y: 421.98), controlPoint1: CGPoint(x: 1.3, y: 431.07), controlPoint2: CGPoint(x: 3.22, y: 425.91))
            blackKeyTop.addCurve(to: CGPoint(x: 13.55, y: 415.73), controlPoint1: CGPoint(x: 7.95, y: 420.01), controlPoint2: CGPoint(x: 10.34, y: 417.93))
            blackKeyTop.addCurve(to: CGPoint(x: 18.28, y: 412.98), controlPoint1: CGPoint(x: 15.71, y: 414.18), controlPoint2: CGPoint(x: 17.29, y: 413.26))
            blackKeyTop.addCurve(to: CGPoint(x: 23.32, y: 411.58), controlPoint1: CGPoint(x: 19.27, y: 412.7), controlPoint2: CGPoint(x: 20.96, y: 412.23))
            blackKeyTop.addLine(to: CGPoint(x: 30.23, y: 410.75))
            blackKeyTop.addLine(to: CGPoint(x: 37.04, y: 411.58))
            blackKeyTop.addLine(to: CGPoint(x: 44.39, y: 414.18))
            blackKeyTop.addLine(to: CGPoint(x: 52.05, y: 419.89))
            blackKeyTop.addLine(to: CGPoint(x: 57.52, y: 428.52))
            blackKeyTop.addLine(to: CGPoint(x: 65.5, y: 451.2))
            blackKeyTop.addLine(to: CGPoint(x: 62.73, y: 420.81))
            blackKeyTop.addLine(to: CGPoint(x: 63.2, y: 408.02))
            blackKeyTop.addLine(to: CGPoint(x: 65.7, y: 396.36))
            blackKeyTop.addLine(to: CGPoint(x: 151.29, y: 3.88))
            blackKeyTop.addCurve(to: CGPoint(x: 151.73, y: 0.61), controlPoint1: CGPoint(x: 151.69, y: 1.96), controlPoint2: CGPoint(x: 151.84, y: 0.87))
            blackKeyTop.addCurve(to: CGPoint(x: 149.11, y: 0), controlPoint1: CGPoint(x: 151.62, y: 0.35), controlPoint2: CGPoint(x: 150.75, y: 0.14))
            blackKeyTop.addLine(to: CGPoint(x: 101.04, y: 0))
            blackKeyTop.addCurve(to: CGPoint(x: 98.87, y: 2.39), controlPoint1: CGPoint(x: 100.09, y: 0.38), controlPoint2: CGPoint(x: 99.37, y: 1.18))
            blackKeyTop.addCurve(to: CGPoint(x: 96.96, y: 9.3), controlPoint1: CGPoint(x: 98.38, y: 3.6), controlPoint2: CGPoint(x: 97.74, y: 5.9))
            blackKeyTop.addLine(to: CGPoint(x: 8.55, y: 376.64))
            blackKeyTop.close()
            context.saveGState()
            context.translateBy(x: 0.96, y: 0.84)
            // Warning: Blur effects are not supported.
            blackKeyTop.usesEvenOddFillRule = true
            context.saveGState()
            context.beginPath()
            context.addPath(blackKeyTop.cgPath)
            context.addRect(blackKeyTop.bounds.insetBy(dx: -55, dy: -55))
            context.clip(using: .evenOdd)
            context.translateBy(x: -247.76, y: 0)
            do {
                let baseZero = context.convertToDeviceSpace(CGPoint.zero).applying(baseTransform)
                let baseOne = context.convertToDeviceSpace(CGPoint(x: 1, y: 1)).applying(baseTransform)
                let baseOffset = context.convertToDeviceSpace(CGPoint(x: 247.76, y: 0)).applying(baseTransform)
                let shadowOffset = CGSize(width: baseOffset.x - baseZero.x, height: baseOffset.y - baseZero.y)
                let shadowBlur: CGFloat = 15 * min(baseOne.x - baseZero.x, baseOne.y - baseZero.y)
                context.setShadow(offset: shadowOffset, blur: shadowBlur, color: UIColor(hue: 0.622, saturation: 1, brightness: 0.714, alpha: 0.5).cgColor)
            }
            context.beginTransparencyLayer(auxiliaryInfo: nil)
            do {
                UIColor.black.setFill()
                blackKeyTop.fill()
                context.saveGState()
                blackKeyTop.lineWidth = 8
                UIColor.black.setStroke()
                blackKeyTop.stroke()
                context.restoreGState()
            }
            context.endTransparencyLayer()
            context.restoreGState()
            blackKeyTop.usesEvenOddFillRule = true
            UIColor(white: 1, alpha: 0.8).setFill()
            blackKeyTop.fill()
            UIColor(hue: 0.616, saturation: 1, brightness: 1, alpha: 0.72).setFill()
            blackKeyTop.fill()
            context.restoreGState()

            currentBezierPath.append(blackKeyTop)

            context.restoreGState()
        }

        context.restoreGState()
    }


    //MARK: - Canvas Images

    /// Page 1

    class func imageOfA5() -> UIImage {
        struct LocalCache {
            static var image: UIImage!
        }
        if LocalCache.image != nil {
            return LocalCache.image
        }
        var image: UIImage

        UIGraphicsBeginImageContextWithOptions(CGSize(width: 200, height: 516), false, 0)
        StyleKit.drawA5()
        image = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()

        LocalCache.image = image
        return image
    }


    //MARK: - Resizing Behavior

    enum ResizingBehavior {
        case aspectFit /// The content is proportionally resized to fit into the target rectangle.
        case aspectFill /// The content is proportionally resized to completely fill the target rectangle.
        case stretch /// The content is stretched to match the entire target rectangle.
        case center /// The content is centered in the target rectangle, but it is NOT resized.

        func apply(rect: CGRect, target: CGRect) -> CGRect {
            if rect == target || target == CGRect.zero {
                return rect
            }

            var scales = CGSize.zero
            scales.width = abs(target.width / rect.width)
            scales.height = abs(target.height / rect.height)

            switch self {
                case .aspectFit:
                    scales.width = min(scales.width, scales.height)
                    scales.height = scales.width
                case .aspectFill:
                    scales.width = max(scales.width, scales.height)
                    scales.height = scales.width
                case .stretch:
                    break
                case .center:
                    scales.width = 1
                    scales.height = 1
            }

            var result = rect.standardized
            result.size.width *= scales.width
            result.size.height *= scales.height
            result.origin.x = target.minX + (target.width - result.width) / 2
            result.origin.y = target.minY + (target.height - result.height) / 2
            return result
        }
    }


}

Как вы можете видеть, я добавил переменную currentBezierPath и добавляю к ней 3 отдельные части чертежа черного ключа (поскольку я хотел бы иметь возможность обнаруживать попадания в любом месте черного ключа, а не только верх).

У меня есть собственный класс с именем-заполнителем FromPaintCode (на данный момент) в отдельном файле .swift: 

import UIKit

@IBDesignable
class FromPaintCode: UIView {

    override func draw(_ rect: CGRect) {
        StyleKit.drawA5(frame: self.bounds)
    }

    //MARK:- Hit TAP
    @objc public func tapDetected(tapRecognizer: UITapGestureRecognizer) {
        let tapLocation: CGPoint = tapRecognizer.location(in: self)
        self.hitTest(tapLocation: CGPoint(x: tapLocation.x, y: tapLocation.y))
    }

    func hitTest(tapLocation: CGPoint) {
        let path: UIBezierPath = currentBezierPath

        if path.contains(tapLocation) {
            print("tap inside bezier path detected!")
        } else {
            print("tap outside bezier path detected!")
        }
    }

}

... Тогда у меня есть простой UIView, подключенный к розетке с именем "aSharp5ViewOutlet" в моем главном ViewController, и я добавляю UITapGestureRecognizer в viewDidLoad(): 

let tapRecognizer = UITapGestureRecognizer(target: aSharp5ViewOutlet, action: #selector(aSharp5ViewOutlet.tapDetected(tapRecognizer:)))
    aSharp5ViewOutlet.addGestureRecognizer(tapRecognizer)

Проблема в том, что в настоящее время распознавание касания является неточным: нижняя часть черной (синей) клавиши, кажется, последовательно возвращает успешные касания, однако верхняя и боковые стороны кажутся пятнистыми, и около середины клавиши я получаю «нажатие» обнаружен внешний путь Безье! сообщение. Кроме того, я получаю ложное «обнаружение касания внутри безье!» немного снаружи, справа от ключа ...

Я пробовал это, не добавляя / не добавляя пути Безье (например, просто фокусируясь на верхней части клавиши), но у меня возникла та же проблема.

Есть предложения по устранению неполадок?

РЕДАКТИРОВАТЬ:

Я решил выбрать более простой маршрут и приблизить клавиши пианино с помощью простых прямоугольников (UIButtons), повернутых на угол, чтобы соответствовать углам на изображении. Вроде как это: 

let testTransform = CGAffineTransform(rotationAngle: .pi * 0.93)

testButton.transform = testTransform

1 Ответ

0 голосов
/ 05 мая 2019

Уважаемый @Matvey, у вас все хорошо в пунктах: -

  1. Принимая UIView с именем FromPaintCode.
  2. Добавление FromPaintCode на UIViewController.
  3. Добавление UITapGestureRecognizer в представление FromPaintCode.

Problem that I am thinking is: -

1.Вычисление StyleKit в функции, где мы добавляем все внутри нашего представления: -

override func draw(_ rect: CGRect) { StyleKit.drawA5(frame: self.bounds) }

2.UIView, который мы создали из раскадровки.

2 Решение может быть : -

Решение 1: -

1.Сначала мы сделаем простой UIView программно в UIViewController: - 

  let testView = UIView()
    testView.frame = CGRect.init(x: 0, y: 0, width: 300, height: 300)
    testView.backgroundColor = .red
    testView.center = self.view.center
    self.view.addSubview(testView.center)

2.Добавьте глобальный currentBezierPath в UIViewController: - var currentBezierPath = UIBezierPath!

, тогда мы нарисуем простой CAShapeLayer в этом **testView**, используя currentBezierPath : - 

currentBezierPath = UIBezierPath(ovalInRect: testView.bounds)
let shapeLayer = CAShapeLayer()
shapeLayer.path = currentBezierPath.CGPath
shapeLayer.fillColor = UIColor(red: 0.5, green: 1, blue: 0.5, alpha: 1).CGColor
shapeLayer.strokeColor = UIColor.blackColor().CGColor
shapeLayer.lineWidth = 2.0
testView.layer.addSublayer(shapeLayer)

Добавить жест в этом тестовом представлении: - 

let tapRecognizer = UITapGestureRecognizer(target: self, action: #selector(UIViewController.tapDetected(tapRecognizer:)))

testView.addGestureRecognizer (tapRecognizer)

4. Зарегистрируйте функцию касания в UIViewController: - 

public func tapDetected(tapRecognizer:UITapGestureRecognizer){
let tapLocation:CGPoint = tapRecognizer.location(in: testView)
self.hitTest(tapLocation: CGPoint(x: tapLocation.x, y: tapLocation.y))}

5.Попробуйте Hit Test в простом стиле только для тестирования по одному пути без помощи StyleKit : - 

private func hitTest(tapLocation:CGPoint){
    let path:UIBezierPath = self.currentBezierPath

    if path.contains(tapLocation){
        //tap detected do what ever you want ..;)
    }else{
        //ooops you taped on other position in view
    }}

Важная информация: -

Если приведенное выше упражнение даст вамТочность, то мы должны посмотреть в StyleKit и отредактировать его, заменив UIGraphicsGetCurrentContext на CAShapeLayer , потому что слои добавляются в UIView и правильно распознаются UITapGestureRecognizer во внутреннем представлении.

Решение 2: -

В вашем случае с контекстом просто используйте простые сенсорные события внутри UIViewController

Делитесь вопросом и решением: -

UIGraphicsGetCurrentContext не появился внутри UIView

...