英文:
How to make PKCanvasView zoomable in SwiftUI?
问题
有一个像这样设置的PKCanvasView:
struct CanvasView {
@Binding var canvasView: PKCanvasView
let onSaved: () -> Void
@State var toolPicker = PKToolPicker()
}
extension CanvasView: UIViewRepresentable {
func makeUIView(context: Context) -> PKCanvasView {
canvasView.tool = PKInkingTool(.pencil, color: .gray, width: 20)
// #if targetEnvironment(simulator)
canvasView.drawingPolicy = .anyInput
// #endif
canvasView.delegate = context.coordinator
showToolPicker()
return canvasView
}
func updateUIView(_ uiView: PKCanvasView, context: Context) {}
func makeCoordinator() -> Coordinator {
Coordinator(canvasView: $canvasView, onSaved: onSaved)
}
}
然后我在SwiftUI中使用它,就像这样:
VStack {
Spacer()
CanvasView(canvasView: $canvasView, onSaved: saveDrawing)
.aspectRatio(1.0, contentMode: .fit)
Spacer()
}
但是,一旦我将它放入ScrollView以添加平移和缩放功能,就像这样:
ScrollView { //prevents drawing with finger
VStack {
Spacer()
CanvasView(canvasView: $canvasView, onSaved: saveDrawing)
.aspectRatio(1.0, contentMode: .fit)
Spacer()
}
}
它停止允许我用手指绘制,假设是在尝试滚动。我正在寻找类似于Apple的自由应用程序的行为。用手指绘制,捏合缩放,两个手指平移。
英文:
There a PKCanvasView setup like this:
struct CanvasView {
@Binding var canvasView: PKCanvasView
let onSaved: () -> Void
@State var toolPicker = PKToolPicker()
}
extension CanvasView: UIViewRepresentable {
func makeUIView(context: Context) -> PKCanvasView {
canvasView.tool = PKInkingTool(.pencil, color: .gray, width: 20)
// #if targetEnvironment(simulator)
canvasView.drawingPolicy = .anyInput
// #endif
canvasView.delegate = context.coordinator
showToolPicker()
return canvasView
}
func updateUIView(_ uiView: PKCanvasView, context: Context) {}
func makeCoordinator() -> Coordinator {
Coordinator(canvasView: $canvasView, onSaved: onSaved)
}
}
And then I use it in SwiftUI Like this:
VStack {
Spacer()
CanvasView(canvasView: $canvasView, onSaved: saveDrawing)
.aspectRatio(1.0, contentMode: .fit)
Spacer()
}
But the second I put it in the ScrollView to add the pan and zoom ability like this
ScrollView { //prevents drawing with finger
VStack {
Spacer()
CanvasView(canvasView: $canvasView, onSaved: saveDrawing)
.aspectRatio(1.0, contentMode: .fit)
Spacer()
}
}
It stops allowing me to draw with finger, presuming that it's trying to scroll instead. I'm looking for a behaviour like the Apple's freeform app. Finger to draw and pinch to zoom, 2 fingers to pan.
答案1
得分: 2
更新
经过一些澄清,我已经添加了将整个绘图区域缩小到小于屏幕尺寸的功能。
Pencil Kit的画布功能强大,内置了缩放和平移。因此,无需添加滚动视图或平移手势,只需设置画布内容的大小、缩放比例和插图。
要进行滚动和平移,请为绘图区域设置较大的画布内容大小:
canvasView.contentSize = CGSize(width: 1500, height: 1000)
要进行缩放,请设置所需的缩放比例:
canvasView.minimumZoomScale = 0.2
canvasView.maximumZoomScale = 4.0
要允许整个绘图区域缩小到小于滚动视图框架尺寸,请添加内容插图:
canvasView.contentInset = UIEdgeInsets(top: 500, left: 500, bottom: 500, right: 500)
以下是一个带有工具选择器的基本SwiftUI铅笔应用程序。该应用程序支持捏合缩放、双指平移和用手指绘制:
import SwiftUI
import PencilKit
struct ContentView: View {
var body: some View {
CanvasView()
}
}
struct CanvasView {
@State var canvasView: PKCanvasView = PKCanvasView()
@State var toolPicker = PKToolPicker()
}
extension CanvasView: UIViewRepresentable {
func makeUIView(context: Context) -> PKCanvasView {
// 画布
canvasView.contentSize = CGSize(width: 1500, height: 1000)
canvasView.drawingPolicy = .anyInput
canvasView.minimumZoomScale = 0.2
canvasView.maximumZoomScale = 4.0
canvasView.backgroundColor = UIColor(red: 0.9, green: 0.9, blue: 0.9, alpha: 1.0)
canvasView.contentInset = UIEdgeInsets(top: 500, left: 500, bottom: 500, right: 500)
canvasView.becomeFirstResponder()
// 工具选择器
toolPicker.setVisible(true, forFirstResponder: canvasView)
toolPicker.addObserver(canvasView)
return canvasView
}
func updateUIView(_ uiView: PKCanvasView, context: Context) {}
}
英文:
Updated
After some clarification, I've included the ability to shrink the entire drawing area smaller than the screen size.
Pencil Kit's canvas is robust with built-in zooming and panning. So there's no need to add scroll views or pan gestures, just set the canvas content's size, zoom scales and insets.
For scrolling and panning, set a large canvas content size for the drawing area:
canvasView.contentSize = CGSize(width: 1500, height: 1000)
For zooming, set the desired zoom scales:
canvasView.minimumZoomScale = 0.2
canvasView.maximumZoomScale = 4.0
For allowing the full drawing area to shrink smaller than the scrollview's frame size, add content insets:
canvasView.contentInset = UIEdgeInsets(top: 500, left: 500, bottom: 500, right: 500)
The following is a basic SwiftUI pencil app with toolpicker. This has the pinch-to-zoom, two-finger panning and finger-to-draw:
import SwiftUI
import PencilKit
struct ContentView: View {
var body: some View {
CanvasView()
}
}
struct CanvasView {
@State var canvasView: PKCanvasView = PKCanvasView()
@State var toolPicker = PKToolPicker()
}
extension CanvasView: UIViewRepresentable {
func makeUIView(context: Context) -> PKCanvasView {
// canvas
canvasView.contentSize = CGSize(width: 1500, height: 1000)
canvasView.drawingPolicy = .anyInput
canvasView.minimumZoomScale = 0.2
canvasView.maximumZoomScale = 4.0
canvasView.backgroundColor = UIColor(red: 0.9, green: 0.9, blue: 0.9, alpha: 1.0)
canvasView.contentInset = UIEdgeInsets(top: 500, left: 500, bottom: 500, right: 500)
canvasView.becomeFirstResponder()
//toolpicker
toolPicker.setVisible(true, forFirstResponder: canvasView)
toolPicker.addObserver(canvasView)
return canvasView
}
func updateUIView(_ uiView: PKCanvasView, context: Context) {}
}
Note: The gif below was created using the code above on an iPad with the toolpicker moved to the side. The background color(white) was manually painted on the drawing area with the toolpicker's marker to better demonstrate the zooming and panning. Setting the scollview's background color independently of the drawing area is a needed enhancement.
The resulting app looks like this:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论