向应用程序添加轨迹栏！

目录

• 目标
• 代码
• 说明
• 结果

下一篇教程： 使用 GDAL 读取地理空间栅格文件

作者	Ana Huamán
兼容性	OpenCV >= 3.0

• 在之前的教程（关于 使用 OpenCV 叠加（混合）两幅图像 和 更改图像的对比度和亮度！）中，你可能已经注意到我们需要向程序提供一些输入，例如 \(\alpha\) 和 \(beta\)。我们使用终端输入这些数据来实现这一目的。
• 现在是使用一些精美的 GUI 工具的时候了。OpenCV 为你提供了一些 GUI 实用程序（highgui 模块）。轨迹栏就是一个例子。

• 在本教程中，我们将修改前两个程序，使它们从轨迹栏获取输入信息。

目标

在本教程中，你将学习如何

• 使用 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, void* )
{
alpha = (double) alpha_slider/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; }
 
alpha_slider = 0;
 
namedWindow("Linear Blend", WINDOW_AUTOSIZE); // 创建窗口
 
   char TrackbarName[50];
snprintf( TrackbarName, sizeof(TrackbarName), "Alpha x %d", alpha_slider_max );
createTrackbar( TrackbarName, "Linear Blend", &alpha_slider, alpha_slider_max, on_trackbar );
 
on_trackbar( alpha_slider, 0 );
 
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);
        }
 
        // 创建并设置窗口。
frame = new JFrame("线性混合");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // 设置内容窗格。
Image img = HighGui.toBufferedImage(matImgSrc2);
addComponentsToPane(frame.getContentPane(), img);
        // 使用内容窗格的默认边框布局。不需要
        // setLayout(new BorderLayout());
        // 显示窗口。
frame.pack();
frame.setVisible(true);
    }
 
    private void addComponentsToPane(Container pane, Image img) {
        if (!(pane.getLayout() instanceof BorderLayout)) {
pane.add(new JLabel("容器不使用边框布局！"));
            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);
 
        // 计划事件调度线程
        // 创建并展示应用程序的 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='为我们的应用程序教程添加轨迹条的代码。')
parser.add_argument('--input1', help='第一张输入图片的路径。', default='LinuxLogo.jpg')
parser.add_argument('--input2', help='第二张输入图片的路径。', 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('无法打开或找到图片: ', args.input1)
exit(0)
 
if src2 is None
print('无法打开或找到图片: ', 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)
 
 
# 展示一些内容
on_trackbar(0)
 
# 等待用户按下某个键
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

        // 创建并设置窗口。
frame = new JFrame("线性混合");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // 设置内容窗格。
Image img = HighGui.toBufferedImage(matImgSrc2);
addComponentsToPane(frame.getContentPane(), img);
        // 使用内容窗格的默认边框布局。不需要
        // setLayout(new BorderLayout());
        // 显示窗口。
frame.pack();
frame.setVisible(true);

Python

cv.namedWindow(title_window)

• 现在我们可以创建轨迹栏了

C++

   char TrackbarName[50];
snprintf( TrackbarName, sizeof(TrackbarName), "Alpha x %d", alpha_slider_max );
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
• 轨迹栏位于名为线性混合的窗口中
• 轨迹栏值介于 \(0\) 至 alpha_slider_max 之间（最小限制始终为零）。
• 轨迹栏的数值存储在alpha_slider中
• 每当用户移动轨迹栏时，就会调用回调函数on_trackbar

最后，我们必须为 C++ 和 Python 代码定义回调函数on_trackbar，在 Java 中使用匿名内部类侦听器

C++

 
static void on_trackbar( int, void* )
{
alpha = (double) alpha_slider/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\)。输出可能如下所示