向我们的应用程序添加滑动条！

目录

• 目标
• 代码
• 解释
• 结果

下一个教程： 使用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\)。输出可能看起来像这样：