소개

음악 편집 소프트웨어에서 자주 사용되는 파형을 클릭 → 드래그하여 범위 선택을 구현하고 싶습니다.


이번에는 patch 함수를 사용하여 구현합니다.

구구루

구그라면 거의 하고 싶은 것에 가까운 것이 나왔다.
App Designer로 만든 GUI에서 마우스 조작으로 그래픽 객체를 움직일 수 있습니까?

하나 이상의 채워진 다각형 영역 플롯 - MATLAB patch

이것을 참고로 작성한다.

AppDesigner 구현

다음 구현을 요약합니다.

구성 요소 배치

다음 구성 요소를 적절하게 배치하십시오.


구성 요소 이름
설명


UIAxes
그래프 표시

OpenFileDialogButton
파일 대화상자 열기

FilePathEditField
파일 이름 표시

멤버 변수

변수 이름
설명


h
패치 객체

mouseStatus
마우스 클릭 상태

clickPos
클릭한 좌표

콜백 함수

기동시 초기화 처리

startupFcn

function startupFcn(app)
% グラフをセットアップ
xlabel(app.UIAxes, '時間[s]');
ylabel(app.UIAxes, '振幅');
% ツールバーを無効にする
app.UIAxes.Toolbar.Visible = 'off';
% 座標軸の組み込み操作を無効にする
disableDefaultInteractivity(app.UIAxes);
% マウス状態を初期化
mouseStatus = "ButtonUp";
end

파일 열기 버튼을 누르면

그래프의 씨닝 표시 처리로서 마지막으로 투고했습니다.
【MATLAB】plot 표시 시간 단축을 위해 데이터를 씨닝한다
에서 만든 DecimationProc를 사용합니다.
(썰매 표시하지 않으면 표시가 너무 무겁기 때문에)

OpenFileDialogButtonPushed

function OpenFileDialogButtonPushed(app, event)
% ファイルダイアログを開く
[file1, path1] = uigetfile({'*.wav;*.mp3','Audio Files (*.wav,*.mp3)'});
if(file1 == 0)
    % キャンセルで閉じた場合
    return
end

% ファイル名をエディットボックスに格納
app.FilePathEditField.Value = file1;

% ファイルを開いてメンバ変数に格納
[y, Fs] = audioread(fullpath1);
y = y(:, 1);% ステレオの場合は片側だけ使用
decimation = 5000;
y = app.DecimationProc(y, decimation);
Fs = Fs/decimation;

% 時間波形をプロット
N = length(y);
t = ((1:N)-1)/Fs;
plot(app.UIAxes, t, y);

% patchオブジェクトを作成
app.h = patch(app.UIAxes,[0, 0, 0, 0],[0, 0, 0, 0],'r');
set(app.h,'FaceAlpha', 0.3); % 透明度
end

마우스 버튼을 누르면 처리

UIFigureWindowButtonDown

function UIFigureWindowButtonDown(app, event)
app.mouseStatus = "ButtonDown";
app.clickPos = app.UIAxes.CurrentPoint;
% クリック位置が範囲外の場合は範囲内に調整
% clamp処理とか言うらしいですね，よく分かりませんが・・・
if(app.clickPos(1,1) < app.UIAxes.XLim(1))
    app.clickPos(1,1) = app.UIAxes.XLim(1);
end
if(app.clickPos(1,1) > app.UIAxes.XLim(2))
    app.clickPos(1,1) = app.UIAxes.XLim(2);
end
% patch描画を消す
app.h.XData = [0, 0, 0, 0];
end

마우스 버튼을 놓았을 때의 처리

UIFigureWindowButtonUp

function UIFigureWindowButtonUp(app, event)
app.mouseStatus = "ButtonUp";
end

마우스 이동 중 처리

이것이이 기사의 주요 처리입니다.
마우스를 클릭 한 위치에서 현재 커서의 범위를 빨간색으로 중첩 표시합니다.

UIFigureWindowButtonMotion

function UIFigureWindowButtonMotion(app, event)
if(app.mouseStatus ~= "ButtonDown")
    return
end
Cp = app.UIAxes.CurrentPoint; % get current mouse point on Axes
if(Cp(1,1) < app.UIAxes.XLim(1))
    Cp(1,1) = app.UIAxes.XLim(1);
end
if(Cp(1,1) > app.UIAxes.XLim(2))
    Cp(1,1) = app.UIAxes.XLim(2);
end
app.h.XData = [app.clickPos(1,1), Cp(1,1), Cp(1,1), app.clickPos(1,1)]; % Update xdata for patch object
drawnow
end

결과

드래그하면 좋은 느낌으로 범위 선택이 가능했다.

결과를 GIF로

GIF로 보면 결과가 잘 전해진다고 생각하지만, 꽤 무겁기 때문에 실용 레벨은 아닐지도.
음, 이것은 캡쳐 소프트로 녹화하면서 MATLAB 앱을 움직이고 있었기 때문에 보다 무겁게 되어 있었으므로, 녹화하고 있지 않을 때는 조금 바삭바삭하게 움직이지요.