用Qt从零实现VisionPro风格卡尺控件：边缘检测与交互设计

简介本资源是一套基于Qt框架实现的VisionPro风格工业视觉卡尺控件库面向机器视觉开发工程师、自动化软件开发者及Qt中级以上学习者解决在自研检测软件中快速集成高交互性几何测量工具的需求。控件完整复现VisionPro核心能力矩形卡尺支持拖动、缩放、旋转与斜切直线卡尺可拉伸调节、设置采样矩形数量并同步变形圆形卡尺支持圆弧拖拽、自动补全为整圆、采样矩形配置及缩放操作。压缩包共12个文件5个.cpp源码、4个.h头文件、2个.ui界面设计文件、1个.pro工程配置总大小仅30KB结构精简模块职责清晰——图形基类、卡尺业务逻辑、参数配置窗体与主窗口协同构成可复用组件。目前已有2159人学习下载提供即开即用的完整工程含图形项重写细节、坐标系变换实现、交互状态管理等关键代码便于二次开发与嵌入现有视觉系统。 我当年第一次在产线视觉项目里看到 VisionPro 的卡尺工具时第一反应是这不就是在图上画几根线、一个圆然后把边缘找出来嘛自己用 Qt 也能写。可真到了要集成进自研上位机、还要让现场调试人员能像用 VisionPro 一样拖来拖去、改参数、看结果时才发现这个“小工具”背后全是细节坐标系换算、亚像素定位、投影宽度到底取多少、拖拽手柄怎么命中、图像缩放后 ROI 怎么跟着动……这篇文章我就把用 Qt 重写 VisionPro 风格矩形、直线、圆形卡尺控件的完整思路和关键代码骨架整理出来包括底层边缘检测原理、三种卡尺的建模方式、交互层的坐标换算以及我实测下来最容易踩的坑。1. 为什么要在 Qt 里重造一个 VisionPro 式卡尺1.1 卡尺控件到底解决什么问题机器视觉里的测量本质上就是“在图像里找边缘”。VisionPro 这种商业视觉软件把这件事封装成了一个个“工具”卡尺Caliper就是其中最常见的一个。它做的事情很明确在图像上划定一片感兴趣区域沿着某个搜索方向扫描灰度变化找到变化最剧烈的位置这个位置就是边缘。传统做视觉测量很多人会用 OpenCV 的 Canny 边缘检测找完整边缘轮廓再做拟合。但产线上的实际需求往往更“局部”我不需要知道整个工件的轮廓我只想测某条边的直线度、某个孔径或者某个台阶的高度。卡尺控件的价值就是把“大而全”的图像处理变成“小而准”的局部测量同时把测量过程可视化让现场工程师能直观地看检测区域在哪、搜素方向是什么、找到的边缘点在哪。1.2 自研 vs 直接调 VisionPro/OpenCV有的团队觉得VisionPro 已经很成熟了直接用不就行了但现实情况是VisionPro 是商业软件授权费不低而且它固定在 Windows 自家运行时环境里。如果你的上位机是 Qt 跨平台架构或者客户现场希望界面完全可控、还要把检测结果嵌入到自己的 MES 系统里闭源商业工具往往不好使。OpenCV 虽然免费但它给的是“算法原语”没有交互 HMI。你需要自己画 ROI、自己处理鼠标拖拽、自己管理图像坐标系——这恰恰是 Qt 的强项。我最终选择的自研方案是底层算法借鉴视觉库的思路但不依赖商业库用 Qt 的 QGraphicsView/QGraphicsScene 做交互层自己实现卡尺搜索和拟合算法。这样做的好处是界面可以完全定制数据流透明也方便离线调试。坏处是所有细节都要自己填这也是这篇文章存在的意义。2. 卡尺控件的底层原理一条搜索线上的边缘定位2.1 从像素到梯度边缘信号怎么提取不管矩形、直线还是圆形卡尺核心都是“沿着某个方向扫描边缘”。第一步是把这个方向上的像素灰度采样出来。假设图像是单通道灰度图卡尺的搜索方向是垂直向下搜索长度是 60 像素那么我从起点开始每隔 1 个像素采集一个灰度值得到一维数组。直接对灰度数组求导就是梯度。数字图像里常用的梯度算子很简单// 一维梯度计算对灰度数组g计算差分 std::vectorfloat computeGradient(const std::vectorfloat gray) { std::vectorfloat grad(gray.size(), 0); for (size_t i 1; i gray.size() - 1; i) { // 中心差分g[i1] - g[i-1]比简单后向差分更稳 grad[i] gray[i 1] - gray[i - 1]; } return grad; }这里的梯度值可正可负。正梯度代表从暗到亮黑到白负梯度代表从亮到暗白到黑这对应了 VisionPro 里的“极性”Polarity参数正向边缘、负向边缘或者任意方向。实际场景里比如找工件外圆背景是亮的工件是暗的那个边缘就是负向的反过来就是正向的。所以卡尺控件的参数面板里必然要有“边缘极性”这个选项。2.2 亚像素定位从像素精度到 0.1 像素工业测量里像素级的边缘定位往往不够用。假设视野是 30mm相机分辨率 500 万像素一个像素大约对应 0.01mm如果边缘定位误差是 1 个像素那测量精度就只有 0.01mm很多精密装配场景根本不能接受。所以商用视觉软件都会做亚像素定位。经典的亚像素方法之一是对梯度峰值的邻域做抛物线插值。具体做法是先找到梯度绝对值最大的像素位置 p然后取 p 点及相邻两点的梯度值拟合成一条抛物线抛物线的顶点位置就是亚像素边缘位置。// 抛物线插值返回亚像素位置输入梯度数组和整数峰值索引 float subPixelByParabola(const std::vectorfloat grad, int peakIdx) { if (peakIdx 0 || peakIdx (int)grad.size() - 1) { return (float)peakIdx; } float y1 grad[peakIdx - 1]; float y2 grad[peakIdx]; float y3 grad[peakIdx 1]; // 顶点偏移公式推导自抛物线三点插值 float denom (y1 - 2.0f * y2 y3); if (fabs(denom) 1e-9f) { return (float)peakIdx; } float offset 0.5f * (y1 - y3) / denom; // offset 控制在 [-0.5, 0.5] 之间越界则截断 offset std::max(-0.5f, std::min(0.5f, offset)); return (float)peakIdx offset; }注意抛物线插值假设边缘的梯度曲线近似抛物线这在多数工业场景下足够。如果图像模糊严重可以先用高斯核平滑再求梯度但平滑半径不能太大否则亚像素偏移会变大。我实测平滑半径 1~2 像素比较合适。2.3 参数模型搜索长度、投影宽度、阈值、评分理解了亚像素定位再回头看卡尺的参数面板就容易了。一个完整的直线卡尺通常有这些参数参数作用典型值建议搜索长度从卡尺中心沿搜索方向扫描的距离大于边缘偏移量比如 50~100 像素投影宽度垂直搜索方向上取多少行做平均4~20 像素抑制噪声边缘极性正/负/任意固定场景尽量用单极性阈值梯度绝对值的最低要求需现场调试一般在 10~508bit边缘数量搜索到几个边缘取最强/最弱/全部通常取 1~2 个投影宽度的概念很关键。比如直线卡尺的搜索线实际上不是一条线而是一条“带”宽度就是投影宽度。扫描时每一个搜索方向上把带内所有像素的灰度值取平均作为该方向上的灰度值再做一维边缘定位。这样能有效抑制随机噪声比单纯看一条线稳定得多。另外还有一个容易忽略的点搜索长度是“双向”的。VisionPro 里搜索方向其实是从卡尺中心向两侧延伸所以参数上会有“前向搜索长度”和“后向搜索长度”。自己实现时我建议拆成两个参数这样对不对称边缘非常友好。3. 直线卡尺与矩形卡尺从多段扫描到几何拟合3.1 直线卡尺的坐标建模直线卡尺是最基础的卡尺。它的几何模型可以这样定义中心点 (cx, cy)方向角 theta搜索方向垂直于直线方向搜索长度 L投影宽度 W。图像坐标里所谓“方向角”是指卡尺长轴的旋转角度。扫描时我需要生成一条垂直于长轴方向的采样路径。核心代码如下把 ROI 内的像素坐标逐点算出来再用双线性插值采集灰度// 生成一条搜索线的像素坐标双线性插值采样 std::vectorfloat sampleProfile(const cv::Mat gray, const cv::Point2f center, float perpAngle, float projectWidth, float searchLength, int sampleCount) { std::vectorfloat profile(sampleCount, 0.0f); // 垂直方向的单位向量 cv::Point2f v(cos(perpAngle), sin(perpAngle)); // 投影宽度方向即卡尺长轴方向的单位向量 cv::Point2f u(cos(perpAngle CV_PI / 2.0f), sin(perpAngle CV_PI / 2.0f)); float step (2.0f * searchLength) / sampleCount; int halfWidth (int)(projectWidth / 2.0f); for (int i 0; i sampleCount; i) { float dist -searchLength i * step; cv::Point2f base center dist * v; // 投影宽度内像素的平均灰度 float sum 0.0f; int count 0; for (int w -halfWidth; w halfWidth; w) { cv::Point2f pt base w * u; // 双线性插值读取灰度 sum bilinearSample(gray, pt); count; } profile[i] sum / count; } return profile; }这段代码最关键的是建立了搜索路径的几何关系中心点、长轴方向、垂直方向三者构成了一个局部坐标系。投影宽度循环内部用 u 方向遍历外循环用 v 方向逐点移动这样就能采样出一维灰度曲线。3.2 矩形卡尺的四边扫描与角点重建矩形卡尺实际上是4 条直线卡尺的组合。矩形可以用中心 (cx, cy)、宽 w、高 h、旋转角 theta 来定义。四条边分别对应上边、下边、左边、右边每边的检测方向指向矩形内部或外部。具体实现时每条边都调用直线卡尺的扫描函数得到该边上的若干边缘点然后用直线拟合最小二乘法得到该边的精确定位最后通过四条边的直线交点重建四个角点。// 直线拟合输入若干边缘点输出 y kx b 的 k 和 b cv::Vec4f fitLineRansac(const std::vectorcv::Point2f pts) { cv::Vec4f line; // 这里用 cv::fitLine方法选 CV_DIST_L2最小二乘 cv::fitLine(pts, line, cv::DIST_L2, 0, 0.01, 0.01); return line; // 返回方向向量和直线上一点 }不过实际使用中纯最小二乘容易被边缘上的离群点带偏比如毛刺、脏污。我会先用 RANSAC 或者在拟合前先按“距离期望直线的偏差”剔除离群点再做最终拟合。工程上的做法是迭代 2~3 次每次拟合后计算每个点到直线的距离删除距离大于 n 倍标准差的点重新拟合直到收敛。这样的鲁棒性会好很多。矩形角点的重建有个重要细节直接把四条边延长求交点结果会受单边检测误差影响。更稳的做法是先拟合四条边再对矩形做整体约束优化比如强制对边平行、临边垂直。如果场景里工件本身就是标准矩形这个约束能让角点精度提升不少。3.3 可运行的检测管线采点、拟合、输出把整个流程捋清楚直线和矩形卡尺的运行管线可以统一成下面几步根据 ROI 参数生成采样点沿搜索方向逐点。对每条搜索线做投影宽度内灰度平均得到一维曲线。计算梯度找到候选边缘点超过阈值。对候选边缘点做亚像素插值得到亚像素边缘点。将所有边缘点按几何模型拟合直线拟合/四边拟合/圆拟合。输出几何参数直线方程、交点点位、矩形的宽高、中心、角度。这套管线的好处是算法与 UI 完全解耦。我可以先在离线环境里跑打印每个边缘点的坐标和拟合结果确认算法没问题再接入控件交互层。UI 只是参数的编辑器和结果的显示器真正干活的检测函数可以单独单元测试。4. 圆形卡尺极坐标展开与圆拟合4.1 环形卡尺的径向扫描采样圆形卡尺在 VisionPro 里通常叫 Circle Caliper用途是测圆孔直径、外圆直径、圆心位置。它的采样方式和直线卡尺不同不是沿直线扫描而是沿径向扫描。几何模型是圆心 (cx, cy)、半径 r、径向搜索长度 L、投影宽度 W沿圆周方向上的弧宽。实现时我在圆周上取 N 个角度采样点比如每 5° 取一个即 72 个方向。每个方向上从圆心沿半径向外或向内扫描一段距离 L这一步和直线卡尺的采样完全一致只是采样方向换成了径向。代码如下// 圆形卡尺在角度angle处沿径向扫描一条线 std::vectorfloat sampleRadialProfile(const cv::Mat gray, const cv::Point2f center, float radius, float angle, float searchLength, float projectWidth, int sampleCount) { float rad angle * CV_PI / 180.0f; cv::Point2f dir(cos(rad), sin(rad)); // 扫描起点半径 - 搜索长度从内向外扫 cv::Point2f start center (radius - searchLength) * dir; std::vectorfloat profile(sampleCount, 0.0f); float step (2.0f * searchLength) / sampleCount; // 投影方向是切向 cv::Point2f tang(-sin(rad), cos(rad)); for (int i 0; i sampleCount; i) { cv::Point2f base start i * step * dir; float sum 0.0f; int count 0; for (int w -(int)(projectWidth / 2.0f); w (int)(projectWidth / 2.0f); w) { cv::Point2f pt base w * tang; sum bilinearSample(gray, pt); count; } profile[i] sum / count; } return profile; }这里有个坑圆周上的采样密度。如果半径很大比如 500 像素5° 间隔对应的边缘点间距是 2πr/72 ≈ 43 像素足够。但如果半径很小20 像素5° 间隔下点间距只有约 2.7 像素边缘点分布太密拟合时容易被局部噪声影响。所以采样角度间隔应该根据半径自适应比如设定目标边缘点间距约 5~10 像素反推角度步长。4.2 圆拟合的最小二乘与鲁棒性拿到 N 个亚像素边缘点之后要拟合出一个最符合这些点的圆。最经典的做法是 Kasa 算法代数最小二乘它把圆拟合转化成线性问题// 代数最小二乘圆拟合输入边缘点输出圆心和半径 bool fitCircle(const std::vectorcv::Point2f pts, cv::Point2f center, float radius) { int n (int)pts.size(); if (n 3) return false; cv::Mat A(n, 3, CV_32F); cv::Mat b(n, 1, CV_32F); for (int i 0; i n; i) { float x pts[i].x, y pts[i].y; A.atfloat(i, 0) 2.0f * x; A.atfloat(i, 1) 2.0f * y; A.atfloat(i, 2) 1.0f; b.atfloat(i, 0) x * x y * y; } cv::Mat solution; cv::solve(A, b, solution, cv::DECOMP_SVD); center.x solution.atfloat(0, 0); center.y solution.atfloat(1, 0); radius sqrt(solution.atfloat(2, 0) center.x * center.x center.y * center.y); return true; }但 Kasa 算法有它的问题如果边缘点只覆盖圆弧的一部分比如只测 120° 的弧它对噪声比较敏感拟合出的圆心会偏向弧的弦方向。这是我在实际项目里踩过的坑。解决办法是改用几何最小二乘或者先做一个初步拟合再用 RANSAC 剔除离群点最后用 Levenberg-Marquardt 做精化。如果你的瓶颈是计算时间且边缘质量稳定Kasa 够用如果你的工件表面反光、污渍多一定要上鲁棒拟合。4.3 圆度/直径测量的实战要点圆形卡尺在产线上最常被用来测直径、圆度。有几个实战经验值得分享第一边缘极性要固定。圆孔在亮背景下的边缘是“白到黑”外圆是“黑到白”如果极性设置反了所有边缘点都会偏移大约一个梯度响应范围。现场调试时我会先把极性锁死不要让操作员随意切换。第二搜索长度不要太长。搜索长度越长噪声越大还容易把附近的其它边缘比如倒角、毛刺扫进来。最好的做法是先用粗定位把圆心大致放在视野中心半径也大概知道然后搜索长度只保留 3~5 个像素的余量。第三边缘点数不要多到冗余。一般 30~50 个圆周边缘点就足够拟合一个圆了太多反而增加计算时间。而且边缘点数超过一定程度对精度提升很小因为误差主要是系统性的不是随机性的。5. 交互层的工程细节拖拽、旋转与坐标换算5.1 QGraphicsItem 体系下的控件结构到这一步算法层面的东西基本齐了真正的“控件感”来自交互层。用 Qt 做机器视觉界面绕不开 QGraphicsView/QGraphicsScene。我可以把检测基准物矩形、直线、圆都设计成 QGraphicsItem 的子类。我推荐的类结构是CaliperItem (基类继承自 QGraphicsObject) ├── LineCaliperItem ├── RectCaliperItem └── CircleCaliperItem这几种 Item 都持有两套数据显示几何QGraphicsItem 坐标系里的坐标点和检测参数搜索长度、投影宽度、边缘极性等。为什么要把显示和检测参数分开因为 QGraphicsItem 本身有 scenePos()、rotation()、scale()直接用 QGraphicsItem 的变换矩阵来承载卡尺的旋转、缩放会让命中检测和坐标换算复杂得多。我自己实现的时候选择的是不用 QGraphicsItem 自身的旋转变换而是在 paint() 里根据存储的中心、角度、宽高手动计算各点绘制。这样虽然多写一点绘制代码但逻辑透明方便调试。5.2 鼠标交互命中测试与手柄缩放交互层关键在三个鼠标操作拖拽、旋转、缩放。拖拽让用户点击卡尺中心区域时整个卡尺跟随鼠标移动。实现方法很简单重写mousePressEvent、mouseMoveEvent、mouseReleaseEvent在 press 时记录当前鼠标 scene 坐标和 item 中心点的差值move 时更新中心点。旋转我习惯在卡尺上方设一个“旋转手柄”通常是个小圆点。鼠标压住旋转手柄时计算鼠标位置与中心点的角度实时更新卡尺旋转角。void CaliperItem::handleRotate(const QPointF scenePos) { QPointF delta scenePos - center_; float angleRad std::atan2(delta.y(), delta.x()); float angleDeg angleRad * 180.0 / M_PI; // 存储的角度 setCaliperAngle(angleDeg); update(); }缩放矩形卡尺的四条边中部有缩放手柄拖动时可以独立修改矩形宽高。圆形卡尺通常在圆周上有一个小手柄拖动时改变半径。这里有个易错点缩放时搜索区域是否跟着放大VisionPro 的默认行为是卡尺主体缩放时搜索长度、投影宽度这些参数保持不变只有 ROI 的几何尺寸变化。我一开始没注意把搜索长度也按比例拉长了结果图像变大后边缘检测范围失控。后来统一为手柄调整的是“几何尺寸”卡尺的内侧和外侧搜索长度始终由参数面板独立控制。5.3 图像坐标系与界面坐标系的换算这个是重中之中很多初学者在这里翻车。图像坐标系的原点在图像左上角单位是像素y 轴向下QGraphicsScene 坐标系默认也是 y 轴向下这倒是很好对齐。但只要涉及图像缩放显示坐标换算就必须用矩阵。我的做法是把图像作为 QGraphicsPixmapItem 放进 Scene然后用 QGraphicsView 的fitInView做初始缩放。卡尺 Item 的几何坐标直接存像素坐标这样检测算法可以直接用卡尺的坐标无需额外换算。反过来鼠标在 view 上的坐标通过mapToScene转成 Scene 坐标由于 Scene 坐标跟图像的像素坐标是 1:1 对应的所以鼠标点直接就是图像上的像素点。// 在 view 的鼠标事件里获得 scene 坐标即图像像素坐标 QPointF scenePos view-mapToScene(event-pos());如果你做的是视频流实时检测图像画面会不断刷新此时不要每次刷新都重建 QGraphicsPixmapItem那样内存和 CPU 开销都很大。正确做法是只更新 pixmap 的setPixmap或者用QGraphicsPixmapItem::setOffset固定位置再定期更新返回的 QImage。实测下来1080p 灰度图重绘一帧在普通台式机上能跑到 60fps 以上。还有一类需求是显示缩放时卡尺线宽保持不变。直接在paint()里设置setCosmetic(true)让画笔宽度不随 view 缩放缩放。否则缩小画面时卡尺线细到看不见放大时又粗得像毛线。6. 落地阶段避坑清单性能、多线程与单位6.1 图像读取与检测的计算开销卡尺检测本身计算量不大一次直线扫描只涉及几十条搜索线、每条几十个采样点几十微秒就能跑完。真正的计算开销大头在图像预处理特别是如果图像需要做高斯模糊、直方图均衡或者透视校正。我在做矩形卡尺时遇到过一个问题矩形区域里如果工件有纹理梯度噪声很大边缘点会一片一片地冒出来。当时想了半天最后发现给图像做一次 3x3 高斯模糊噪声显著下降边缘检测稳定了很多。但高斯模糊不能加太大否则边缘定位会偏。这个“尺度-精度”的平衡只能靠实验标定。工业相机采集的图像通常是 8bit 灰度有时候是 10bit 或 12bit 的 RAW。在 Qt 里加载 10bit 图像很多图片库会截断成 8bit丢信息。我建议直接在数据流层面处理相机原始数据先做像素格式转换再套卡尺算法不要走 Qt 的 QImage 加载流程。6.2 多线程刷新策略检测线程与 UI 线程解耦在实时检测界面里相机采图线程、检测线程、UI 刷新线程需要解耦。最草率也最常见的错误是在 UI 线程里直接调用相机回调然后立刻检测、画图结果界面卡成幻灯片。我采用的线程模型很简单相机线程只管把最新的图像帧放进一个环形缓冲区或一个带互斥锁的“当前帧”变量。检测线程从缓冲区取一帧跑卡尺检测把检测结果边缘点、拟合参数存进结果对象。UI 定时器每 30~50ms 取一次最新结果更新卡尺显示。这里要注意检测线程和 UI 线程不要直接共享 QGraphicsItem 的坐标数据。我会把检测结果封装成一个只读的CaliperResult结构体用 Qt 的信号槽或者std::atomic标志告知 UI 线程“有新结果”UI 线程拿到结果后再更新 item。最简单的做法是用QPointer配合Qt::QueuedConnection避免在线程里直接调用 item 的方法。// 检测线程处理完一帧后发信号 emit detectionFinished(result); // UI 线程槽函数中更新控件 void MainWindow::onDetectionFinished(const CaliperResult result) { rectCaliperItem_-setEdgePoints(result.edgePoints); rectCaliperItem_-setFittedRect(result.rect); rectCaliperItem_-update(); }6.3 我实测中遇到的三个坑第一个坑是图像坐标系原点。OpenCV 读图原点在左上角y 向下但某些工业相机的 SDK 给的坐标原点在左下角y 向上。如果直接拿相机坐标画到 Qt 上整个卡尺都是镜像的。后来我在接入层统一做了一次坐标翻转然后所有内部逻辑只用“左上角原点”的像素坐标系。第二个坑是拖拽旋转后边缘点显示错位。原因很隐蔽我在拖动整个卡尺时只更新了中心点坐标但边缘点的显示还是用旧的搜索方向算出来的。解决办法是拖动结束后强制重新检测一次或者把边缘点坐标存储为“卡尺局部坐标”paint 时再乘旋转矩阵这样几何变换后边缘点相对位置自然正确。第三个坑是圆形卡尺的投影宽度边界。当投影宽度比较宽比如 10 像素时如果圆弧半径较小切向叠加的采样点会超出图像范围双线性插值读到边界外的值时灰度值会异常偏大或偏小。我需要做越界检查超界样本直接丢弃而不是用边界像素填充。否则圆拟合结果会有一个系统性的逼近偏移。7. 后续还可以怎么扩展我实现的这套卡尺控件目前能支撑直线、矩形、圆形三类测量。等真正跑到稳定状态你会发现这只是一个“地基”它上面可以继续盖测量组件的楼比如两点间距测量就是两个圆卡尺圆心连线距离、角度测量两条直线卡尺拟合线夹角、圆弧卡尺圆卡尺截取部分圆弧。如果现场需要做批量标定还可以给卡尺控件加一个“ROI 模板”导出功能把一组卡尺的几何参数保存为 JSON切换产品时一键加载。给 Qt 项目里集成这类视觉控件我个人最大的体会是不要把交互参数和算法参数混在一起管理。界面上的“搜索长度”“投影宽度”“边缘阈值”等等应该有一个独立的CaliperSettings对象UI 控件只绑定这个对象算法只读这个对象。这样无论是写自动化脚本、保存配方还是后期做参数自动调优都方便得多。再分享一个实用的小技巧调试卡尺算法时在控件的 paint() 里把“原始灰度曲线叠加到图上”画出来。通常是沿着搜索方向画一个亮度变化折线再在找到的边缘点上画个亮色十字。我第一次做圆形卡尺时正是靠这种可视化一眼看出某个角度区间的边缘点整体偏移了半格像素——原来是光源反光造成的系统性偏差而不是算法 bug。这种调试能力是商业软件很难给你的也是自己动手实现的最大价值。本文还有配套的精品资源点击获取