移动鼠标实现图片的缩放

关注

翻译最新推荐文章于 2024-10-17 11:23:08 发布 990 阅读 AI 写同款· GEO 优化 ›

VS+Qt+Halcon——显示图片，实现鼠标缩放、移动图片摘要本篇博文记录一下，用VS+Qt+Halcon实现对图片的读取以及鼠标缩放，移动(鼠标事件调用了halcon自带的算子)的过程。以及遇到的坑.....???????? 先来看一下动态效果图：主要控件：添加一个Label控件，对象名设为label，用于显示图片，并将背景设为黑色，设置方法为：选中Label控件，在属性编辑器中找到styleSheet属性，在其后的值中输入background-co...... 阅读详情

效果图：

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Modified Hoverbox Image Gallery</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content=noindex,nofollow name=robots>
<STYLE type=text/css>* {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
PADDING-RIGHT: 30px; PADDING-LEFT: 30px; BACKGROUND: #fff; PADDING-BOTTOM: 30px; MARGIN: 0px; COLOR: #666; PADDING-TOP: 30px; TEXT-ALIGN: center
}
H1 {
FONT: bold 16px Arial, Helvetica, sans-serif
}
P {
MARGIN: 15px 0px; FONT: 11px Arial, Helvetica, sans-serif
}
A {
FONT-WEIGHT: bold; COLOR: #900; TEXT-DECORATION: none
}
A:hover {
BACKGROUND: #900; COLOR: #fff
}
HR {
CLEAR: both; MARGIN: 24px 0px; _margin: 0
}
#page-container {
MARGIN: 0px auto; WIDTH: 350px; TEXT-ALIGN: left
}
.pg {
LIST-STYLE-IMAGE: none; WIDTH: 350px; LIST-STYLE-TYPE: none
}
.pg:unknown {
CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "."
}
.pg LI {
DISPLAY: inline; LIST-STYLE-IMAGE: none; LIST-STYLE-TYPE: none
}
.pg LI A {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 4px; FLOAT: left; PADDING-BOTTOM: 4px; MARGIN: 2px; BORDER-LEFT: #ccc 1px solid; WIDTH: 100px; PADDING-TOP: 4px; BORDER-BOTTOM: #ccc 1px solid; POSITION: relative; HEIGHT: 75px
}
.pg LI A:hover {
FONT-SIZE: 100%; Z-INDEX: 2
}
.pg LI A IMG {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; WIDTH: 100px; BORDER-BOTTOM: 0px; POSITION: absolute; HEIGHT: 75px
}
.pg LI A:hover IMG {
Z-INDEX: 1; LEFT: -50px; WIDTH: 200px; TOP: -37px; HEIGHT: 150px
}
.pg LI A:active IMG {
Z-INDEX: 1; LEFT: -50px; WIDTH: 200px; TOP: -37px; HEIGHT: 150px
}
.pg LI A:focus IMG {
Z-INDEX: 1; LEFT: -50px; WIDTH: 200px; TOP: -37px; HEIGHT: 150px
}
</STYLE>