{%hackmd BJrTq20hE %}
# 開發紀錄 Week4

### UI Screamshot


### UI Detail
#### 繼承LookandFeelv4 class 來設計自己的旋鈕
- 利用下列含式將旋鈕外圈亮紫色的部分畫出

juce::Path backgroundArc;
backgroundArc.addCentredArc(bounds.getCentreX(),bounds.getCentreY(),
                            arcRadius,arcRadius,0.0f,rotaryStartAngle,rotaryEndAngle,true);
g.setColour(fill);
g.drawLine(backgroundArc.getBounds().getCentreX(), backgroundArc.getBounds().getCentreY(), thumbPoint.getX(), thumbPoint.getY(), lineW); //center pin

- 下一步設計旋鈕中心的指針

juce::Point<float> thumbPoint(bounds.getCentreX() + (arcRadius - 10.0f) * std::cos(toAngle - juce::MathConstants<float>::halfPi),
            bounds.getCentreY() + (arcRadius - 10.0f) * std::sin(toAngle - juce::MathConstants<float>::halfPi));

- 最後將旋鈕中心的暗灰色圓圈畫出及指針畫出
- 要注意畫上去的順序，如果指針先畫再畫圓圈，則指針可能被蓋掉

g.setColour(buttonColor);
g.fillEllipse(rx+10, ry+10, rw-20, rw-20);

g.setColour(fill);
g.drawLine(backgroundArc.getBounds().getCentreX(), 
           backgroundArc.getBounds().getCentreY(), thumbPoint.getX(), thumbPoint.getY(), lineW); //center pin

### RotarySliderWithLabel
#### 設計有label的旋鈕

RotarySliderWithLabel::RotarySliderWithLabel(NewProjectAudioProcessor& audioProcessor, juce::String titleName,juce::String unit) :
    processor(audioProcessor)
{
    setLookAndFeel(&lnf);
    slider.setSliderStyle(juce::Slider::SliderStyle::RotaryHorizontalDrag);
    slider.setTextBoxStyle(juce::Slider::TextBoxBelow,
        true,
        slider.getTextBoxWidth() - 30,
        slider.getTextBoxHeight());
    
    attachment = std::make_unique<juce::AudioProcessorValueTreeState::SliderAttachment>(processor.tree, juce::String{ titleName }.toLowerCase(), slider);
    title.setText(titleName, juce::dontSendNotification);
    title.setJustificationType(juce::Justification::centred);
    addAndMakeVisible(title);
    addAndMakeVisible(slider);
}

- 利用```setLookAndFeel(&lnf);```將設計好的樣式載入
- 利用```title.setText(titleName,juce::dontSendNotification);title.setJustificationType(juce::Justification::centred);```將Label貼上
#### 額外注意事項
- destructor的地方必須設定nullptr，否則會出問題

RotarySliderWithLabel::~RotarySliderWithLabel()
{
    setLookAndFeel(nullptr);
}

### Oscilloscope and Spectrum

- 皆為datuji所寫