折り曲げ効果を実現する方法

範囲トリミングと回転効果を実現する方法。

毎日

私は今でも、私のブログが冷酷な技術的な共有ではなく、温かさを持って、Hongyang と Guo Lin の公式アカウントのように、私自身の個性を残したいと願っています。彼らはブログのトップに最新ニュースなどを気軽に書きますが、私はそうではなく、時事問題にも興味はありますが、趣味のことやアニメのこと、趣味のことなど、とりとめのないことを書きがちです。すぐ。

序文

具体的な導入結果が上記の効果ですが、どうすれば上記の効果を実現できるのでしょうか？いつものように、冷蔵庫を 3 つのステップで設置するにはどうすればよいですか? ただ分割して征服するだけです。

1. 写真を取得する

2. 上部を描きます

3. 下半分を描く

文章

写真を取得する

画像の取得については、これまで何度も触れてきたので、ここでは詳しく説明しません。

後続の操作を続行する前に、いくつかの詳細を明確にする必要があります。まず、画像をビュー全体の中心に配置する必要があります。このとき、ビューの上から無闇に描画することはできず、位置に基づいて動的に描画する必要があることを明確にする必要があります。ビューの中心と画像の高さ この場合、画像の高さが決定されていないため、ビューの描画を開始する開始位置を計算します。

//存储裁剪的范围
private val rect: Rect = Rect()
override fun onDraw(canvas: Canvas) {
    
    
    super.onDraw(canvas)
	//获取头像图片
    val bitmap = R.drawable.avatar.getBitmap(context, width / 2)
    canvas.save()
    //根据图片的获取结果来动态地设置裁剪范围
    rect.apply {
    
    
        left = 0
		//裁剪的顶部位置是：视图的正中央的高度-图片高度/2
        top = height / 2 - bitmap.height / 2
        //因为我们这里的用例比较简单，所以可以粗略地直接根据width进行裁剪
        right = width
		//裁剪的底部位置是：视图的正中央高度+图片高度/2
        bottom = height / 2 + bitmap.height / 2
    }

画像の上半分を描画します

先ほども述べたように、絵の上半分の領域位置が取得できたので、上半分の領域位置を基に描画位置を切り抜いて、上半分のビューを描画していきます。

canvas.save()
rect.apply {
    
    
    left = -width / 2
    top = -height / 2
    right = width / 2
    bottom = 0
}
canvas.clipRect(rect)
canvas.translate(-width / 2f, -height / 2f)
canvas.drawBitmap(bitmap, width / 4f, height / 2f - bitmap.height / 2, paint)
canvas.restore()

画像の下半分を描画します

前回で絵の領域の上半分の描画が完了しましたので、今度は絵の領域の下半分を描画していきます。
画像の下半分の描画は、画像の上半分に基づいてキャンバスの移動および回転効果のレイヤーを追加することであると前に説明しました。
ここでトリミング領域をリセットする必要があります。

同様に、まずビューの中心の位置と画像の高さに基づいて、画像の下半分のトリミング領域の設定を完了する必要があります。

次に、ここで Camera クラスを定義する必要があります。このクラスの機能は、キャンバスの回転効果をシミュレートし、回転したキャンバス上の画像を x0y 平面に投影するための「光源」としてカメラ ポイントを設定することです。ここで注意する必要があるのは、canvas.translate() はキャンバス内の絵ではなくキャンバスを移動すること、そして絵は x0y 座標軸に基づいて描画されるのではなく、キャンバスの座標軸に基づいて描画されることです。さて、これを説明した後、フォローアップ操作を続けましょう。カメラにはデフォルトの座標軸 (0、0、-8) があり、カメラの投影方向はデフォルトで正の Z 軸方向になります。

このように、画像の中心は (0,0,0) ではないため、投影は希望どおりにはなりません。

このとき、カメラの回転効果を適用する前に、まず画像の中心がちょうど座標軸の遠い点に来るようにキャンバスを移動し、それからカメラを適用してキャンバスを反転してから移動する必要があります実際に絵を描く前にキャンバスを元の位置に戻せば完了です。次のように：

canvas.save()
rect.apply {
    
    
    left = -width / 2
    top = 0
    right = width / 2
    bottom = height / 2
}
canvas.translate(width / 2f, height / 2f)
camera.applyToCanvas(canvas)
canvas.clipRect(rect)
canvas.translate(-width / 2f, -height / 2f)
canvas.drawBitmap(bitmap, width / 4f, height / 2f - bitmap.height / 2, paint)
canvas.restore()

itmap(ビットマップ、幅 / 4f、高さ / 2f - bitmap.height / 2、ペイント)
Canvas.restore()