「码力全开」假如今年公司中秋的月饼由你来设计

发布于:2023-01-02 ⋅ 阅读:(445) ⋅ 点赞:(0)

目录

 一、前言

二、码力全开

1、设计思路

2、功能设计

3、功能分解

4、代码编写

5、效果展示

6、画蛇添足

7、产品交付

三、总结


 一、前言

中秋将至,最惬意的事,莫过于“花前月下码代码”。

产品经理一句话,若是今年公司的月饼由你们来设计,到底会设计出来一帮怎样的牛鬼蛇神?😄

作为一名java程序员,考察的就是动手能力,show me your code,no if!

二、码力全开

1、设计思路

拿到需求,本来最先考虑的是怎样的口味,回头一想,口味只是月饼的一个属性,而月饼作为一个接口,应该先把抽象问题具体化。

月饼

|——公司月饼

                |——形状

                |——颜色

                |——口味

2、功能设计

具体化之后,便可以进行功能拆分,仔细分析后,发现形状、颜色、口味还可以细分,稍不留神复杂度便会上来,工作量过饱和,很有可能出现延期风险。

于是突发奇想,既然是中秋月圆之夜,月饼上所有的图案都用圆形来设计,于是画了一个圆,随意上了一点色。

3、功能分解

作为一名程序员,这时候非常渴望一名美工。

一个圆实在是太过单调,可以下一步却不知道如何走,一拍脑袋,干脆在大圆周围再画一圈小圆。

没想到一时间,竟来了灵感,开始功能拆解。

功能名称 子功能 功能说明
月饼形状 画出外侧多个小圆 外侧点缀
画出大圆 凸显层次感
画出中间多个小圆 内侧点缀
画出中间圆 凸显层次感
画出小圆 凸显层次感
中间文字展示 logo

4、代码编写

根据功能拆解,可以列出为代码,然后填充实现 

@Override
public void paintComponent(Graphics g) {

    //画出外侧多个小圆
    circleOutter(g);
    //画出大圆
    circleBig(g);
    //画出中间多个小圆
    circleInner(g);
    //画出中间圆
    circleMid(g);
    //画出小圆
    circleSmall(g);
    //文字展示
    g.setColor(new Color(244,200,118));
    g.setFont(new Font("Dialog", Font.PLAIN, 32));
    g.drawString("中秋快乐",240,310);
}

 源码:

启动类:

package com.zhufeng;

import com.zhufeng.ui.CakeFrame;

import javax.swing.*;

/**
 * @ClassName: ShowMoonCake
 * @Description 显示月饼
 * @author 月夜烛峰
 * @date 2022/8/30 19:35
 */
public class ShowMoonCake {
    public static void main(String[] args) {
        // 显示应用 GUI
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                new CakeFrame();
            }
        });
    }
}

运行窗口:

package com.zhufeng.ui;

import javax.swing.*;

/**
 * @ClassName: CakeFrame
 * @Description 月饼窗口
 * @author 月夜烛峰
 * @date 2022/8/30 19:41
 */
public class CakeFrame extends JFrame {

    public CakeFrame() {
        init();
    }

    public void init() {
        this.setTitle("中秋快乐");
        //添加面板
        CakePanel cake = new CakePanel();
        this.add(cake);
        this.setSize(650, 650);
        this.setLocationRelativeTo(null);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setResizable(false);
        this.setVisible(true);

        add(new CakePanel());
        //启动动态效果
        cake.startRun();

    }
}

月饼生成代码:

package com.zhufeng.ui;

import javax.swing.*;
import java.awt.*;

/**
 * @ClassName: CakePanel
 * @Description 月饼面板
 * @author 月夜烛峰
 * @date 2022/8/30 19:45
 */
public class CakePanel extends JPanel {

    //仅作为动态展示,设置大于10可跳过动态展示
    private int stepIndex = -1;

    @Override
    public void paintComponent(Graphics g) {

        //画出外侧多个小圆
        circleOutter(g);
        //画出大圆
        circleBig(g);
        //画出中间多个小圆
        circleInner(g);
        //画出中间圆
        circleMid(g);
        //画出小圆
        circleSmall(g);
        //文字展示
        g.setColor(new Color(244,200,118));
        g.setFont(new Font("Dialog", Font.PLAIN, 32));
        g.drawString("中秋快乐",240,310);
    }

    private void circleSmall(Graphics g){
        if(stepIndex<5){
            return;
        }
        g.setColor(new Color(225,156,37));
        g.fillArc(205, 202, 200, 200, 0, 360);
        g.setColor(new Color(215,126,6));
        g.fillArc(215, 212, 180, 180, 0, 360);
    }

    private void circleMid(Graphics g){
        if(stepIndex<4){
            return;
        }
        g.setColor(new Color(225,156,37));
        g.fillArc(175, 172, 260, 260, 0, 360);
        g.setColor(new Color(215,126,6));
        g.fillArc(185, 182, 240, 240, 0, 360);
    }

    private void circleBig(Graphics g){
        if(stepIndex<2){
            return;
        }
        g.setColor(new Color(225,156,37));
        g.fillArc(75, 72, 460, 460, 0, 360);
        g.setColor(new Color(215,126,6));
        g.fillArc(85, 82, 440, 440, 0, 360);
    }

    private void circleInner(Graphics g){
        if(stepIndex<3){
            return;
        }
        g.setColor(new Color(244,200,118));
        //将圆15等分
        int maxNumber = 15;
        // N等分后每个角度的度数
        int  oneAngle = 360/maxNumber;
        // 圆心坐标--X
        int  centerX = 0;
        // 圆心坐标--Y
        int  centerY = 0;
        // 半径
        int  radius = 180;
        for (int i = 0; i < maxNumber; i++) {
            int tmp = i*oneAngle;
            Double x =(centerX +  radius * Math.cos(tmp * Math.PI / 180));
            Double y =(centerY +radius * Math.sin(tmp *Math.PI /180));
            g.fillArc(240+65-20+x.intValue(), 240+62-20-y.intValue(), 40, 40, 0, 360);
        }

        //遮挡部分
        g.setColor(new Color(215,126,6));
        radius = 160;
        for (int i = 0; i < maxNumber; i++) {
            int tmp = i*oneAngle;
            Double x =(centerX +  radius * Math.cos(tmp * Math.PI / 180));
            Double y =(centerY +radius * Math.sin(tmp *Math.PI /180));
            g.fillArc(240+65-20+x.intValue(), 240+62-20-y.intValue(), 40, 40, 0, 360);
        }
    }

    private void circleOutter(Graphics g){

        g.setColor(new Color(215,126,6));
        g.fillArc(55, 52, 500, 500, 0, 360);
        if(stepIndex<1){
            return;
        }
        //将圆15等分
        int maxNumber = 15;
        // N等分后每个角度的度数
        int  oneAngle = 360/maxNumber;
        // 圆心坐标--X
        int  centerX = 0;
        // 圆心坐标--Y
        int  centerY = 0;
        // 半径
        int  radius = 230;
        for (int i = 0; i < maxNumber; i++) {
            int tmp = i*oneAngle;
            Double x =(centerX +  radius * Math.cos(tmp * Math.PI / 180));
            Double y =(centerY +radius * Math.sin(tmp *Math.PI /180));
            g.fillArc(240+65-50+x.intValue(), 240+62-50-y.intValue(), 100, 100, 0, 360);
        }
    }

    public void startRun(){
        new Thread(){
            @Override
            public void run(){
                while(stepIndex<10){
                    stepIndex++;
                    try {
                        //让线程休眠800毫秒
                        Thread.sleep(800);
                    }
                    catch (InterruptedException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }
                    //刷新屏幕,自动调用paint()方法
                    repaint();
                }
            }
        }.start();
    }

}

5、效果展示

运行之后,居然出现了bug,原本内测有两圈小圆,两圈小圆出现了部分重合,居然神奇的形成了月亮形状,整体看来不过还算说的过去。

6、画蛇添足

原本可以交差了,但是总感觉缺些什么,时间还相对宽松,生怕产品经理理解不了编码开发的设计过程,为了彰显自己的技术能力,加了动态展示。

于是,就像文章开篇这样,它动了起来。。。

7、产品交付

迫不及待的让产品经理看,于是诡异的一幕:

产品经理:“这是啥,月饼咋还动?是卡了吗?什么口味的?”

程序员:   “口味 ???...”

三、总结

解释是多余的~


网站公告

今日签到

点亮在社区的每一天
去签到