在SwiftUI中自由手绘图 [英] Free hand drawing on image in SwiftUI

问题描述

我想在图像上画线.

解决方案

这是在 Rectangle 上快速实现图形绘制的方法，但是您可以放置​​所需的任何视图.我使用 Path 并将每个点保存在 DragGesture 中，然后使用这些点绘制 Shape :

  struct DrawExample:View {@State变量点:[CGPoint] = []var body:some View {ZStack {Rectangle()//用您需要的替换它.foregroundColor(.red).edgesIgnoringSafeArea(.all).gesture(DragGesture().onChanged({self.addNewPoint(value)}).onEnded({//在这里，您执行所需的操作}))DrawShape(点:点).stroke(lineWidth:5)//在这里放置线宽.foregroundColor(.blue)}}私人功能addNewPoint(_ value:DragGesture.Value){//在这里，您可以根据之前的观点进行一些计算points.append(value.location)}}struct DrawShape:Shape {var points:[CGPoint]//绘图在这里进行func path(在rect中:CGRect)->小路 {var path = Path()守卫let firstPoint = points.first else {返回路径}path.move(至:firstPoint)对于1 ..< points.count {path.addLine(to:points [pointIndex])}返回路径}} 

使用上面的代码，您可以实现以下目标:

I wanted to draw lines on the image. https://stackoverflow.com/a/60002068/12759144 link helps to draw on the shapes. I set gesture to image and tried drawing lines on the image. but it is not drawing the lines on the image.

Image(uiImage: self.shareImage).renderingMode(.original).resizable().padding(5).gesture(DragGesture().onChanged( { value in self.addNewPoint(value)

                            })
                                .onEnded( { value in
                                    self.isFirstTouchBegan = false
                                }))

                            DrawShape(pointss: points)
                                .stroke(lineWidth: 5) 
                                .foregroundColor(.blue)

Attached screen for reference.

解决方案

Here is fast implementation of drawing on Rectangle, but you can put any view you need. I used Path and saved every point at the DragGesture and than use these points to draw Shape:

struct DrawExample: View {

    @State var points: [CGPoint] = []

    var body: some View {

        ZStack {
            Rectangle() // replace it with what you need
                .foregroundColor(.red)
                .edgesIgnoringSafeArea(.all)
                .gesture(DragGesture().onChanged( { value in
                    self.addNewPoint(value)
                })
                .onEnded( { value in
                    // here you perform what you need at the end
                }))


            DrawShape(points: points)
                .stroke(lineWidth: 5) // here you put width of lines
                .foregroundColor(.blue)
        }

    }

    private func addNewPoint(_ value: DragGesture.Value) {
        // here you can make some calculations based on previous points
        points.append(value.location)
    }

}

struct DrawShape: Shape {

    var points: [CGPoint]

    // drawing is happening here
    func path(in rect: CGRect) -> Path {
        var path = Path()
        guard let firstPoint = points.first else { return path }

        path.move(to: firstPoint)
        for pointIndex in 1..<points.count {
            path.addLine(to: points[pointIndex])

        }
        return path
    }
}

with code above you can achieve this:

这篇关于在SwiftUI中自由手绘图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！