apple products by android canvas
先上圖
代碼下載
效果.png
效果.gif
用到的知識(shí)點(diǎn)主要是Shader宗收，Shader如何使用,三階貝塞爾曲線Path.cubicTo伦吠，iMac的底座就是用三階貝塞爾曲線畫的趁舀，Mac pro的陰影是用二階貝塞爾曲線赤套。
1,iMac
iMac底部支架,陰影效果，彎曲視覺感受院促。
private void drawSupport(Canvas canvas) {
pathSupport.reset();
rectSupport.top = rectSreeen.bottom;
rectSupport.left = rectSreeen.centerX() - rectSreeen.width() / 9f;
rectSupport.right = rectSreeen.centerX() + rectSreeen.width() / 9f;
rectSupport.bottom = rectSreeen.bottom + mHigth / 5 * 0.8f;
pathSupport.moveTo(rectSupport.left + 10,
rectSupport.top);
pathSupport.cubicTo(
rectSupport.left + rectSupport.width() / 18f,
rectSupport.top + rectSupport.height() * 2.5f / 3f,
rectSupport.left + rectSupport.width() / 16f,
rectSupport.top + rectSupport.height() * 2f / 3f,
rectSupport.left - 30,
rectSupport.bottom - 20);
pathSupport.lineTo(rectSupport.right + 30, rectSupport.bottom - 20
);
pathSupport.cubicTo(
rectSupport.right - rectSupport.width() / 16f,
rectSupport.top + rectSupport.height() * 2f / 3f,
rectSupport.right - rectSupport.width() / 18f,
rectSupport.top + rectSupport.height() * 2.5f / 3f,
rectSupport.right - 10,
rectSupport.top);
rectBottom.top = rectSupport.bottom - 20;
rectBottom.bottom = rectSupport.bottom - 20 + mHigth / 5 * 0.8f / 15f;
rectBottom.left = rectSupport.left - 30;
rectBottom.right = rectSupport.right + 30;
pathSupport.close();
mShader = new LinearGradient(rectSupport.centerX(), rectSupport.top,
rectSupport.centerX(), rectSupport.bottom,
new int[]{Color.rgb(190, 190, 190),
Color.rgb(245, 245, 245),
Color.rgb(245, 245, 245),
Color.rgb(190, 190, 190),
Color.rgb(245, 245, 245)
}, new float[]{0f, 0.5f, 0.55f, 0.65f, 1f},
Shader.TileMode.CLAMP);
mPaint.setColor(Color.rgb(249, 249, 249));
mPaint.setShader(mShader);
canvas.drawPath(pathSupport, mPaint);
mPaint.setShader(null);
}
iMac漸變陰影效果
private void drawComputerShadow(Canvas canvas) {
pathComputerShadow.reset();
pathComputerShadow.moveTo(rectBottom.left + 10, rectBottom.bottom);
pathComputerShadow.quadTo(rectBottom.left + 30, rectBottom.bottom,
rectBottom.left + 30, mHigth
);
pathComputerShadow.lineTo(rectBottom.right - 30, mHigth);
pathComputerShadow.quadTo(rectBottom.right - 30, rectBottom.bottom,
rectBottom.right - 10, rectBottom.bottom
);
mShader = new LinearGradient(rectBottom.centerX(), rectBottom.bottom,
rectBottom.centerX(), mHigth,
new int[]{
Color.rgb(235, 235, 235),
Color.rgb(255, 255, 255)
}, new float[]{0f, 1f},
Shader.TileMode.CLAMP);
mPaint.setColor(Color.rgb(245, 245, 245));
mPaint.setShader(mShader);
canvas.drawPath(pathComputerShadow, mPaint);
mPaint.setShader(null);
}
2,Mac pro
觸摸板
private void drawKeyboardTouch(Canvas canvas) {
pathKeyboardTouch.reset();
pathKeyboardTouch.moveTo((rectKeyboard.centerX() - rectBg.width() / 6f / 3f * 1.2f),
rectKeyboard.top);
pathKeyboardTouch.quadTo((rectKeyboard.centerX() - rectBg.width() / 6f / 3f * 1.2f),
rectKeyboard.top + rectKeyboard.height() / 3f * 2f
, (rectKeyboard.centerX() - rectBg.width() / 6f / 3f * 1.2f) + rectKeyboard.height()
, rectKeyboard.top + rectKeyboard.height() / 3f * 2f
);
pathKeyboardTouch.lineTo((rectKeyboard.centerX() + rectBg.width() / 6f / 3f * 1.2f) - rectKeyboard.height(),
rectKeyboard.top + rectKeyboard.height() / 3f * 2f);
pathKeyboardTouch.quadTo(
(rectKeyboard.centerX() + rectBg.width() / 6f / 3f * 1.2f),
rectKeyboard.top + rectKeyboard.height() / 3f * 2f,
(rectKeyboard.centerX() + rectBg.width() / 6f / 3f * 1.2f),
rectKeyboard.top);
pathKeyboardTouch.close();
mPaint.setColor(coloKeyboardTouch);
canvas.drawPath(pathKeyboardTouch, mPaint);
}
有時(shí)間就把剩下的蘋果系列產(chǎn)品補(bǔ)齊...畢竟我是個(gè)開發(fā)Android的果粉蝗羊。
代碼下載
