我一直在到处寻找一个被问了很多次的问题的答案。我花了几个小时浏览 SO 和 Google。必须有一个不费吹灰之力的答案。
我正在开发一个矢量绘图应用程序，最终使绘图和撤消功能正常工作。现在我需要一个橡皮擦：-o
编辑：根据@DonMag 的精彩文章，我能够非常接近橡皮擦，但有些东西仍然不太正确。因此，我将尝试解释我的视图和图层在应用程序中的位置以及我这样做的原因：
从底部视图/层到顶部...
BackgroundImageView - 我正在使用这个图像视图来保存绘图表面的“背景”。这是一个可以更改的层，可以保存和调用新的“模板”。我将它分开，以便用户无法擦除绘图表面。背景由 CAShapeLayers 组成，它们被绘制来代表不同的纸张类型。
MainImageView - 我正在使用这个图像视图来完成用户启动的所有绘图。所以我触摸并拖动手指，新的 CAShapeLayer 被添加到图像视图中。这使用户的绘图与“绘图表面”分开。这也是我希望擦除发生的地方
PageImagesView - 我使用这个视图来保存用户可以添加到页面的图像，并移动/调整它们的大小。我不希望橡皮擦影响图像，但是如果在 MainImageView 中绘制的一条线穿过图像并需要擦除，它应该让图像显示出来，而不是删除图像的一部分。
我还添加了另一层试图让橡皮擦工作，并将其命名为“EraserImageView”，并将“蒙版”绘制到其中，然后尝试将该蒙版应用于 MainImageView。
这是我的绘图代码，每次调用 touchesMoved 时都会调用：
编辑： 将橡皮擦的代码添加到我的绘图代码中。
if eraser {
let linePath = UIBezierPath()
for (index, point) in line.enumerated() {
if index == 0 {
midPoint = CGPoint(
x: (point.x + point.x) / 2,
y: (point.y + point.y) / 2
)
linePath.move(to: midPoint!)
} else {
midPoint = CGPoint(
x: (point.x + line[index - 1].x) / 2,
y: (point.y + line[index - 1].y) / 2
)
linePath.addQuadCurve(to: midPoint!, controlPoint: line[index - 1])
}
}
let maskLayer = CAShapeLayer()
maskLayer.lineWidth = brush
maskLayer.lineCap = .round
maskLayer.strokeColor = UIColor.black.cgColor
maskLayer.fillColor = nil
maskLayer.frame = backgroundImageView.bounds
maskLayer.path = linePath.cgPath
//eraserImageView.layer.addSublayer(backgroundImageView.layer)
eraserImageView.layer.addSublayer(maskLayer)
eraserImageView.layer.mask = mainImageView.layer
}
上面的代码导致所有用户绘图消失，除了“橡皮擦”触摸的部分。我知道我有问题，或者我没有正确使用面罩。有没有人有办法解决吗？
画了一些线条，看起来很棒......
[
当我尝试橡皮擦时，会发生这种情况......
正如您在上面看到的，我可以画线，但是一旦我将橡皮擦触摸到页面上，它就会删除除我用橡皮擦触摸的部分之外的所有内容。
有谁知道我哪里出错了？？
编辑： 如此接近！ 当我移动手指时，我能够让橡皮擦去除部分画线。但它不是使用尺寸进行绘制，而是在制作形状。使用橡皮擦后，只要我触摸绘图表面，它就会替换所有“已擦除”的部分。
这是我的新橡皮擦代码：
if eraser {
//var rect: CGRect = CGRect()
let linePath = UIBezierPath(rect: mainImageView.bounds)
for (index, point) in line.enumerated() {
if index == 0 {
midPoint = CGPoint(
x: (point.x + point.x) / 2,
y: (point.y + point.y) / 2
)
//rect = CGRect(x: midPoint!.x, y: midPoint!.y, width: brush, height: brush)
linePath.move(to: midPoint!)
} else {
midPoint = CGPoint(
x: (point.x + line[index - 1].x) / 2,
y: (point.y + line[index - 1].y) / 2
)
//rect = CGRect(x: midPoint!.x, y: midPoint!.y, width: brush, height: brush)
linePath.addQuadCurve(to: midPoint!, controlPoint: line[index - 1])
}
}
let maskLayer = CAShapeLayer()
maskLayer.lineWidth = brush
maskLayer.lineCap = .round
maskLayer.strokeColor = UIColor.clear.cgColor
maskLayer.fillColor = UIColor.black.cgColor
maskLayer.opacity = 1.0
maskLayer.path = linePath.cgPath
maskLayer.fillRule = .evenOdd
mainImageView.layer.addSublayer(maskLayer)
mainImageView.layer.mask = maskLayer
}
结果如下：
关于如何让橡皮擦像线条一样绘制的任何想法？
编辑：应@DonMag 的要求添加背景“绘图”的代码
import Foundation
import UIKit
class DrawBulletLayer : UIView {
private var bullet: CAShapeLayer?
func drawBullets(coordinates: UIImageView, bulletColor: UIColor) -> CALayer {
let bullet = self.bullet ?? CAShapeLayer()
let bulletPath = UIBezierPath()
bullet.contentsScale = UIScreen.main.scale
var bullets: [CGPoint] = []
let width = coordinates.frame.width
let height = coordinates.frame.height
let widthBullets = CGFloat(width / 55)
let heightBullets = CGFloat(height / 39)
var hb: CGFloat?
var wb: CGFloat?
for n in 1...39 {
hb = heightBullets * CGFloat(n)
for o in 1...55 {
wb = widthBullets * CGFloat(o)
bullets.append(CGPoint(x: wb!, y: hb!))
}
}
UIColor.black.setStroke()
bullets.forEach { point in
bulletPath.move(to: point)
bulletPath.addLine(to: point)
}
bullet.path = bulletPath.cgPath
bullet.opacity = 1.0
bullet.lineWidth = 2.0
bullet.lineCap = .round
bullet.fillColor = UIColor.clear.cgColor
bullet.strokeColor = bulletColor.cgColor
if self.bullet == nil {
self.bullet = bullet
layer.addSublayer(bullet)
}
return layer
}
}
以下是将其添加到 BackgroundImageView 的方式：
func updateTemplate() {
let templates = TemplatePickerData()
var loadLayer = templates.loadTemplateIds()
if loadLayer.count == 0 {
_ = templates.loadTemplates()
loadLayer = templates.loadTemplateIds()
}
print("this is the template ID: \(templateId)")
//let templateId = loadLayer[template].value(forKey: "templateId") as! Int
if template < 0 {
template = 0
}
switch template {
case 0:
//scrollView.image = UIImage(named: "habitTracker0")!
scrollView.backgroundImageView.layer.sublayers?.removeAll()
scrollView.backgroundImageView.layer.addSublayer(drawBullets.drawBullets(coordinates: scrollView.backgroundImageView, bulletColor: UIColor(red: 214.0/255.0, green: 214.0/255.0, blue: 214.0/255.0, alpha: 1.0)))
scrollView.setNeedsLayout()
scrollView.layoutIfNeeded()
scrollView.setNeedsDisplay()
case 1:
//scrollView.image = UIImage(named: "monthTemplate0")!
scrollView.backgroundImageView.layer.sublayers?.removeAll()
scrollView.backgroundImageView.layer.addSublayer(drawNotes.drawLines(coordinates: scrollView.backgroundImageView, lineColor: UIColor(red: 214.0/255.0, green: 214.0/255.0, blue: 214.0/255.0, alpha: 1.0)))
scrollView.setNeedsLayout()
scrollView.layoutIfNeeded()
scrollView.setNeedsDisplay()
case 2:
//scrollView.image = UIImage(named: "habitTracker0")!
scrollView.backgroundImageView.layer.sublayers?.removeAll()
scrollView.backgroundImageView.layer.addSublayer(drawNotes2.drawLines(coordinates: scrollView.backgroundImageView, lineColor: UIColor(red: 214.0/255.0, green: 214.0/255.0, blue: 214.0/255.0, alpha: 1.0)))
scrollView.setNeedsLayout()
scrollView.layoutIfNeeded()
scrollView.setNeedsDisplay()
default:
if loadLayer.count > template {
template = 0
}
print("this layer is named: \(loadLayer[template].value(forKey: "templateName") as! String)")
let layer = loadLayer[template].value(forKey: "templatePath") as! String
templateId = loadLayer[template].value(forKey: "templateId") as! Int
let thisTemplate = templates.loadImage(image: layer)
scrollView.backgroundImageView.layer.sublayers?.removeAll()
scrollView.backgroundImageView.layer.addSublayer(drawBullets.drawBullets(coordinates: scrollView.backgroundImageView, bulletColor: UIColor(red: 214.0/255.0, green: 214.0/255.0, blue: 214.0/255.0, alpha: 1.0)))
scrollView.backgroundImageView.layer.addSublayer(thisTemplate)
scrollView.setNeedsLayout()
scrollView.layoutIfNeeded()
scrollView.setNeedsDisplay()
}
scrollView.setNeedsDisplay()
if optionsMenuView.pageNameTextField.text != "" {
if isYear {
page = optionsMenuView.savePage(journalName: journalName, monthName: nil, weekName: nil, yearName: yearName, yearPosition: yearPosition, pageDrawingPath: pageDrawingPath, originalName: originalYearName, brushColor: 1, brushSize: brushSizeMenuView.brushSlider.value, templateId: templateId, pageDrawing: scrollView.mainImageView.layer)
} else {
page = optionsMenuView.savePage(journalName: journalName, monthName: monthName, weekName: weekName, yearName: nil, yearPosition: nil, pageDrawingPath: pageDrawingPath, originalName: originalWeekName, brushColor: 1, brushSize: brushSizeMenuView.brushSlider.value, templateId: templateId, pageDrawing: scrollView.mainImageView.layer)
}
}
optionsMenuView.templateId = templateId
}
希望能帮助更多...
