向我們的應用程式新增滑動條！

目錄

• 目標
• 程式碼
• 解釋
• 結果

下一個教程： 使用GDAL讀取地理空間柵格檔案

原始作者	Ana Huamán
相容性	OpenCV >= 3.0

• 在之前的教程中（關於使用OpenCV新增（混合）兩幅影像和改變影像的對比度和亮度！），您可能已經注意到我們需要給程式一些輸入，例如 \(\alpha\) 和 \(beta\)。我們透過在終端中輸入這些資料來完成。
• 現在是時候使用一些花哨的GUI工具了。OpenCV為您提供了一些GUI實用程式（highgui模組）。一個例子就是軌跡條（Trackbar）。

• 在本教程中，我們將修改之前的兩個程式，使它們從軌跡條獲取輸入資訊。

目標

在本教程中，您將學習如何

• 透過使用cv::createTrackbar在OpenCV視窗中新增一個軌跡條。

程式碼

讓我們修改在教程使用OpenCV新增（混合）兩幅影像中建立的程式。我們將讓使用者透過軌跡條輸入 \(\alpha\) 值。

C++

本教程程式碼如下所示。您也可以從這裡下載。

 
#include "opencv2/imgcodecs.hpp"
#include "opencv2/highgui.hpp"
#include <iostream>
 
using namespace cv;
using std::cout;
 
const int alpha_slider_max = 100;
int alpha_slider;
double alpha;
double beta;
 
Mat src1;
Mat src2;
Mat dst;
 
 
static void on_trackbar(int pos, void* userdata) {
(void) userdata;
alpha = (double)pos / alpha_slider_max;
beta = (1.0 - alpha);
addWeighted(src1, alpha, src2, beta, 0.0, dst);
imshow("Linear Blend", dst);
}
 
int main(void)
{
src1 = imread(samples::findFile("LinuxLogo.jpg"));
src2 = imread(samples::findFile("WindowsLogo.jpg"));
 
    if (src1.empty()) { cout << "Error loading src1 \n"; return -1; }
    if (src2.empty()) { cout << "Error loading src2 \n"; return -1; }
 
    // Initialize trackbar value
alpha_slider = 0;
 
namedWindow("Linear Blend", WINDOW_AUTOSIZE); //Create Window
 
    char TrackbarName[50];
snprintf(TrackbarName, sizeof(TrackbarName), "Alpha x %d", alpha_slider_max);
    // Example userdata: Pass a pointer to an integer as userdata
createTrackbar(TrackbarName, "Linear Blend", &alpha_slider, alpha_slider_max, on_trackbar);
 
on_trackbar(alpha_slider, nullptr);
 
waitKey(0);
    return 0;
}

Java

本教程程式碼如下所示。您也可以從這裡下載。

import java.awt.BorderLayout;
import java.awt.Container;
import java.awt.Image;
 
import javax.swing.BoxLayout;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JSlider;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;
 
import org.opencv.core.Core;
import org.opencv.core.Mat;
import org.opencv.highgui.HighGui;
import org.opencv.imgcodecs.Imgcodecs;
 
public class AddingImagesTrackbar {
    private static final int ALPHA_SLIDER_MAX = 100;
    private int alphaVal = 0;
    private Mat matImgSrc1;
    private Mat matImgSrc2;
    private Mat matImgDst = new Mat();
    private JFrame frame;
    private JLabel imgLabel;
 
    public AddingImagesTrackbar(String[] args) {
String imagePath1 = "../data/LinuxLogo.jpg";
String imagePath2 = "../data/WindowsLogo.jpg";
        if (args.length > 1) {
imagePath1 = args[0];
imagePath2 = args[1];
        }
matImgSrc1 = Imgcodecs.imread(imagePath1);
matImgSrc2 = Imgcodecs.imread(imagePath2);
        if (matImgSrc1.empty()) {
System.out.println("Empty image: " + imagePath1);
System.exit(0);
        }
        if (matImgSrc2.empty()) {
System.out.println("Empty image: " + imagePath2);
System.exit(0);
        }
 
        // Create and set up the window.
frame = new JFrame("Linear Blend");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // Set up the content pane.
Image img = HighGui.toBufferedImage(matImgSrc2);
addComponentsToPane(frame.getContentPane(), img);
        // Use the content pane's default BorderLayout. No need for
        // setLayout(new BorderLayout());
        // Display the window.
frame.pack();
frame.setVisible(true);
    }
 
    private void addComponentsToPane(Container pane, Image img) {
        if (!(pane.getLayout() instanceof BorderLayout)) {
pane.add(new JLabel("Container doesn't use BorderLayout!"));
            return;
        }
 
JPanel sliderPanel = new JPanel();
sliderPanel.setLayout(new BoxLayout(sliderPanel, BoxLayout.PAGE_AXIS));
 
sliderPanel.add(new JLabel(String.format("Alpha x %d", ALPHA_SLIDER_MAX)));
JSlider slider = new JSlider(0, ALPHA_SLIDER_MAX, 0);
slider.setMajorTickSpacing(20);
slider.setMinorTickSpacing(5);
slider.setPaintTicks(true);
slider.setPaintLabels(true);
slider.addChangeListener(new ChangeListener() {
@Override
            public void stateChanged(ChangeEvent e) {
JSlider source = (JSlider) e.getSource();
alphaVal = source.getValue();
update();
            }
        });
sliderPanel.add(slider);
 
pane.add(sliderPanel, BorderLayout.PAGE_START);
imgLabel = new JLabel(new ImageIcon(img));
pane.add(imgLabel, BorderLayout.CENTER);
    }
 
    private void update() {
        double alpha = alphaVal / (double) ALPHA_SLIDER_MAX;
        double beta = 1.0 - alpha;
Core.addWeighted(matImgSrc1, alpha, matImgSrc2, beta, 0, matImgDst);
Image img = HighGui.toBufferedImage(matImgDst);
imgLabel.setIcon(new ImageIcon(img));
frame.repaint();
    }
 
    public static void main(String[] args) {
        // 載入本地 OpenCV 庫
System.loadLibrary(Core.NATIVE_LIBRARY_NAME);
 
        // Schedule a job for the event dispatch thread
        // creating and showing this application's GUI.
javax.swing.SwingUtilities.invokeLater(new Runnable() {
@Override
            public void run() {
                new AddingImagesTrackbar(args);
            }
        });
    }
}

Python

本教程程式碼如下所示。您也可以從這裡下載。

from __future__ import print_function
from __future__ import division
import cv2 as cv
import argparse
 
alpha_slider_max = 100
title_window = 'Linear Blend'
 
 
def on_trackbar(val)
alpha = val / alpha_slider_max
beta = ( 1.0 - alpha )
dst = cv.addWeighted(src1, alpha, src2, beta, 0.0)
    cv.imshow(title_window, dst)
 
 
parser = argparse.ArgumentParser(description='Code for Adding a Trackbar to our applications tutorial.')
parser.add_argument('--input1', help='Path to the first input image.', default='LinuxLogo.jpg')
parser.add_argument('--input2', help='Path to the second input image.', default='WindowsLogo.jpg')
args = parser.parse_args()
 
 
src1 = cv.imread(cv.samples.findFile(args.input1))
src2 = cv.imread(cv.samples.findFile(args.input2))
 
if src1 is None
print('Could not open or find the image: ', args.input1)
exit(0)
 
if src2 is None
print('Could not open or find the image: ', args.input2)
exit(0)
 
 
cv.namedWindow(title_window)
 
 
 
trackbar_name = 'Alpha x %d' % alpha_slider_max
cv.createTrackbar(trackbar_name, title_window , 0, alpha_slider_max, on_trackbar)
 
 
# Show some stuff
on_trackbar(0)
 
# Wait until user press some key
cv.waitKey()

解釋

我們只分析與軌跡條相關的程式碼。

• 首先，我們載入兩幅影像，它們將被混合。

C++

src1 = imread(samples::findFile("LinuxLogo.jpg"));
src2 = imread(samples::findFile("WindowsLogo.jpg"));

Java

        String imagePath1 = "../data/LinuxLogo.jpg";
        String imagePath2 = "../data/WindowsLogo.jpg";
        if (args.length > 1) {
imagePath1 = args[0];
imagePath2 = args[1];
        }
matImgSrc1 = Imgcodecs.imread(imagePath1);
matImgSrc2 = Imgcodecs.imread(imagePath2);

Python

src1 = cv.imread(cv.samples.findFile(args.input1))
src2 = cv.imread(cv.samples.findFile(args.input2))

• 要建立軌跡條，我們首先必須建立它將位於的視窗。所以：

C++

    namedWindow("Linear Blend", WINDOW_AUTOSIZE); //建立視窗

Java

        // Create and set up the window.
frame = new JFrame("Linear Blend");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // Set up the content pane.
Image img = HighGui.toBufferedImage(matImgSrc2);
addComponentsToPane(frame.getContentPane(), img);
        // Use the content pane's default BorderLayout. No need for
        // setLayout(new BorderLayout());
        // Display the window.
frame.pack();
frame.setVisible(true);

Python

cv.namedWindow(title_window)

• 現在我們可以建立軌跡條了：

C++

    char TrackbarName[50];
snprintf(TrackbarName, sizeof(TrackbarName), "Alpha x %d", alpha_slider_max);
    // Example userdata: Pass a pointer to an integer as userdata
    createTrackbar(TrackbarName, "Linear Blend", &alpha_slider, alpha_slider_max, on_trackbar);

Java

sliderPanel.add(new JLabel(String.format("Alpha x %d", ALPHA_SLIDER_MAX)));
JSlider slider = new JSlider(0, ALPHA_SLIDER_MAX, 0);
slider.setMajorTickSpacing(20);
slider.setMinorTickSpacing(5);
slider.setPaintTicks(true);
slider.setPaintLabels(true);

Python

trackbar_name = 'Alpha x %d' % alpha_slider_max
cv.createTrackbar(trackbar_name, title_window , 0, alpha_slider_max, on_trackbar)

請注意以下幾點（C++程式碼）：

• 我們的軌跡條有一個標籤TrackbarName。
• 軌跡條位於名為Linear Blend的視窗中。
• 軌跡條的值將在 \(0\) 到alpha_slider_max的範圍內（最小限制始終為零）。
• 軌跡條的數值儲存在alpha_slider中。
• 無論使用者何時移動軌跡條，回撥函式on_trackbar都會被呼叫。

最後，我們必須為C++和Python程式碼定義回撥函式on_trackbar，在Java中使用匿名內部類監聽器。

C++

 
static void on_trackbar(int pos, void* userdata) {
(void) userdata;
alpha = (double)pos / alpha_slider_max;
beta = (1.0 - alpha);
    addWeighted(src1, alpha, src2, beta, 0.0, dst);
    imshow("Linear Blend", dst);
}

Java

slider.addChangeListener(new ChangeListener() {
@Override
            public void stateChanged(ChangeEvent e) {
JSlider source = (JSlider) e.getSource();
alphaVal = source.getValue();
update();
            }
        });

Python

def on_trackbar(val)
alpha = val / alpha_slider_max
beta = ( 1.0 - alpha )
dst = cv.addWeighted(src1, alpha, src2, beta, 0.0)
    cv.imshow(title_window, dst)

請注意（C++程式碼）：

• 我們使用alpha_slider（整數）的值來獲取alpha的雙精度值。
• alpha_slider在使用者每次拖動軌跡條時都會更新。
• 我們將src1、src2、dist、alpha、alpha_slider和beta定義為全域性變數，以便它們可以在任何地方使用。

結果

• 我們的程式產生以下輸出：

• 作為練習，您還可以為在改變影像的對比度和亮度！中建立的程式新增兩個軌跡條。一個軌跡條用於設定 \(\alpha\)，另一個用於設定 \(\beta\)。輸出可能看起來像這樣：