Question

我要做的是采用方形图像视图，使其成为一个5点的图像视图，其顶部和底部为3点三角形，底部为点。

public func shapeImage(with bezierPath: UIBezierPath, size: CGSize, fillColor: UIColor? = UIColor.clear,
                         strokeColor: UIColor? = nil, strokeWidth: CGFloat = 0.0) -> UIImage! {

UIGraphicsBeginImageContext(size)
let context = UIGraphicsGetCurrentContext()
var image = UIImage(data: try! Data(contentsOf: URL(string:"https://a248.e.akamai.net/secure.meetupstatic.com/photos/member/5/3/5/e/highres_260901342.jpeg")!))!

if let context = context {
    context.saveGState()
    context.addPath(bezierPath.cgPath)

    if let strokeColor = strokeColor {
        strokeColor.setStroke()
        context.setLineWidth(strokeWidth)
    } else {
        UIColor.clear.setStroke()
    }

    fillColor?.setFill()
    context.drawPath(using: .fillStroke)

    image = UIGraphicsGetImageFromCurrentImageContext()!
    context.restoreGState()
    UIGraphicsEndImageContext()
}
return image

}

我想把顶部做得更大，并保持下半部的大小相同。我不想掩盖或剪切原始图像的某些部分。我希望通过拉伸而不是遮蔽来实际塑造更大的图像。我在这个网站上没有看到任何解释如何做到这一点或是否有可能。

Answer 1

如果您不想使用蒙版进行裁剪，则会出现非常奇怪的扭曲图像。如果您确实非常确定这是您想要的，您可以使用https://github.com/Ciechan/BCMeshTransformView首先向下移动所有点，然后设置它的动画以仅向上移动中心点。类似的东西：

BCMeshVertex vertices[] = {
    {.from = {0.0, 0.0}, .to= {0.0, 0.5, 0.0}},
    {.from = {1.0, 0.0}, .to= {1.0, 0.5, 0.0}},
    {.from = {1.0, 1.0}, .to= {1.0, 1.0, 0.0}},
    {.from = {0.0, 1.0}, .to= {0.0, 1.0, 0.0}},
};

然后当你想把它变成一个房子时，将矢量更新为：

BCMeshVertex vertices[] = {
    {.from = {0.0, 0.0}, .to= {0.0, 0.5, 0.0}},
    {.from = {0.5, 0.0}, .to= {0.0, 0.0, 0.0}},
    {.from = {1.0, 0.0}, .to= {1.0, 0.5, 0.0}},
    {.from = {1.0, 1.0}, .to= {1.0, 1.0, 0.0}},
    {.from = {0.0, 1.0}, .to= {0.0, 1.0, 0.0}},
};

这将产生一个奇怪的网格，像Warp \ bend effect on a UIView?这样的扭曲效果 - 这非常肯定会看起来非常难看。但这就是你要求的。（使用CAShapeLayer屏蔽图像有一个更简单的解决方案。）

Answer 2

你可以参考

this answer

当我的任何问题为此提供代码但是，现在你表明帮助与否..我尽我所能..

示例：

// This form will have user name which is a string
import { Storage } from '@ionic/storage';
logForm(form) {
    if (form.valid) {
        console.log(form.value);
        this.myData = form.value;
        this.setData();
    }
}
setData(){
    this.storage.set('userObj', JSON.stringify(this.myData));
    this.getData();
}
getData(){ 
    this.storage.get('userObj').then((data) => {
        console.log("get data", JSON.parse(data));

    });

}

Answer 3

我真的没有看到在新的BezierPath中再创建一个点并使用相同的fillColor，Stroke等绘制新图像的问题。你可以使用像这样的扩展......

public class func shapeImage(with bezierPath: UIBezierPath, size: CGSize, fillColor: UIColor? = UIColor.clear,
                             strokeColor: UIColor? = nil, strokeWidth: CGFloat = 0.0) -> UIImage! {

    UIGraphicsBeginImageContext(size)
    let context = UIGraphicsGetCurrentContext()
    var image = UIImage()
    if let context = context {
        context.saveGState()
        context.addPath(bezierPath.cgPath)

        if let strokeColor = strokeColor {
            strokeColor.setStroke()
            context.setLineWidth(strokeWidth)
        } else {
            UIColor.clear.setStroke()
        }

        fillColor?.setFill()
        context.drawPath(using: .fillStroke)

        image = UIGraphicsGetImageFromCurrentImageContext()!
        context.restoreGState()
        UIGraphicsEndImageContext()
    }
    return image
}

如何将imageview转换和放大为一个形状（swift3）

3 个答案: