问题
I need to detect taps within a very specific area of my UI - a piano key that's at an angle, highlighted in blue here, but the way I have it currently set up, the detection is inaccurate:
Since this isn't a simple rectangle, I can't just use a regular button. Instead, I decided to use the PaintCode plugin in order to create the bezier path directly from Sketch.
Before you say this question is a duplicate: yes, I am aware of this question that was asked previously, and in fact I relied heavily on Abhimanyu Rathore and Diogo Souza's answer there to get the basic functionality going.
The Sketch image is made out of 3 parts, blackKeyTop, blackKeySide, and blackKeyBottom, which is why PaintCode appears to have created 3 separate bezier paths:
//
// 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
}
}
}
As you can see, I've added a variable currentBezierPath, and I am appending the 3 separate parts of the black key drawing to it (since I'd like to be able to detect hits anywhere on the black key, not just the top).
I then have a custom class, with a placeholder name FromPaintCode (for now), in a separate .swift file:
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!")
}
}
}
... Then I've got a simple UIView connected to an outlet named "aSharp5ViewOutlet" in my main ViewController, and I'm adding a UITapGestureRecognizer in viewDidLoad():
let tapRecognizer = UITapGestureRecognizer(target: aSharp5ViewOutlet, action: #selector(aSharp5ViewOutlet.tapDetected(tapRecognizer:)))
aSharp5ViewOutlet.addGestureRecognizer(tapRecognizer)
The issue is that currently the tap recognition is inaccurate: the bottom portion of black (blue) key seems to return successful taps consistently, however the top and sides seem spotty, and around the middle of the key I get the "tap outside bezier path detected!" message. Additionally, I get the false "tap inside bezier path detected!" slightly outside, to the right of the key...
I have tried this without adding up / appending the bezier paths (just focusing on the top portion of the key, for example) but had the same issue.
Any suggestions on how to troubleshoot this?
EDIT:
I decided to choose an easier route and approximate the piano keys with simple rectangles (UIButtons) rotated at an angle to match the angles in the image. Kind of like this:
let testTransform = CGAffineTransform(rotationAngle: .pi * 0.93)
testButton.transform = testTransform
回答1:
Dear @Matvey your are doing good at points:-
- Taking a
UIViewwith the name ofFromPaintCode. - Adding
FromPaintCodeonUIViewController. - Adding
UITapGestureRecognizeron the viewFromPaintCode.
Problem that I am thinking is :-
1. StyleKit calculation in function where we are adding everything inside our View :-
override func draw(_ rect: CGRect) {
StyleKit.drawA5(frame: self.bounds)
}
2. UIView that we created from storyboard.
2 Solution can be :-
Solution 1 :-
1. First we will make a simple UIView programatically in 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. Add a global currentBezierPath in your UIViewController :- var currentBezierPath = UIBezierPath!
then we will draw a simple CAShapeLayer in this **testView** using 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)
Add Gesture on this testing view :-
let tapRecognizer = UITapGestureRecognizer(target: self, action: #selector(UIViewController.tapDetected(tapRecognizer:)))testView.addGestureRecognizer(tapRecognizer)
4.Register Tap Function in UIViewController :-
public func tapDetected(tapRecognizer:UITapGestureRecognizer){
let tapLocation:CGPoint = tapRecognizer.location(in: testView)
self.hitTest(tapLocation: CGPoint(x: tapLocation.x, y: tapLocation.y))}
5. Try Hit Test in Simple style for one path testing only without StyleKit help:-
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
}}
Important Information :-
If above exercise will give you accuracy then we need to look in StyleKit and edit it by replacing UIGraphicsGetCurrentContext with CAShapeLayer because layers are adding on UIView and detecting properly by UITapGestureRecognizer inside view.
Solution 2 :-
In your Context case just use simple touch events inside UIViewController
Sharing you a question & solution :-
UIGraphicsGetCurrentContext didn't appear inside UIView
来源：https://stackoverflow.com/questions/55963229/why-is-the-hittest-tap-detection-within-a-bezier-path-producing-inaccurate-res