橡皮筋放大 对图片的拉框放大

最新推荐文章于 2019-05-13 10:01:44 发布
最新推荐文章于 2019-05-13 10:01:44 发布
阅读量378 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39815213/article/details/81451274
版权 
<head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body{
                background: rgba(100,145,250,.3);
            }
            #canvas{
                margin: 0 0 20px 20px;
                border: thin solid #aaa;
                cursor: crosshair;
                padding: 0;
            }
            #controls{
                        margin: 20px 20px 20px 20px;
            }
            #rubberbandDiv{
                position: absolute;
                border: 3px solid blue;
                cursor: crosshair;
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="" id="controls">
            <input type="button" name="" id="resetButton" value="Reset" />
        </div>
        <div class="" id="rubberbandDiv">

        </div>
        <canvas id="canvas" width="800" height="520">
            canvas not supported
        </canvas>
    </body>
    <script type="text/javascript">
        var canvas=document.getElementById('canvas'),
            context=canvas.getContext('2d'),
            rubberbandDiv=document.getElementById('rubberbandDiv'),
            resetButton=document.getElementById('resetButton'),
            image= new Image(),
            mousedown={},
            rubberbandRectangle={},
            dragging=false;

        function rubberbandStart(x,y){
            mousedown.x=x;
            mousedown.y=y;
            rubberbandRectangle.x=mousedown.x;
            rubberbandRectangle.y=mousedown.x;
            dragging=true;
        }

        function rubberbandStretch(x,y){
            rubberbandRectangle.left=x<mousedown.x?x:mousedown.x;
            rubberbandRectangle.top=y<mousedown.y?y:mousedown.y;

            rubberbandRectangle.width=Math.abs(x-mousedown.x);
            rubberbandRectangle.height=Math.abs(y-mousedown.y);

            moveRubberbandDiv();
            resizeRubberbandDiv();
        }

        function rubberbandEnd(){
            var bbox=canvas.getBoundingClientRect();

            try{
                context.drawImage(canvas,
                                  rubberbandRectangle.left-bbox.left,
                                  rubberbandRectangle.top-bbox.top,
                                  rubberbandRectangle.width,
                                  rubberbandRectangle.height,
                                  0,0,canvas.width,canvas.height);
            }
            catch(e){

            }

            resetRubberbandRectangle();
            rubberbandDiv.style.width=0;
            rubberbandDiv.style.height=0;
            hideRubberbandDiv();
            dragging=false;
        }

        function moveRubberbandDiv(){
            rubberbandDiv.style.top =rubberbandRectangle.top+"px";
            rubberbandDiv.style.left =rubberbandRectangle.left+"px";
        }
        function resizeRubberbandDiv(){
            rubberbandDiv.style.width =rubberbandRectangle.width+"px";
            rubberbandDiv.style.height =rubberbandRectangle.height+"px";
        }
        function showRubberbandDiv(){
            rubberbandDiv.style.display='inline';
        }
        function hideRubberbandDiv(){
            rubberbandDiv.style.display='none';
        }
        function resetRubberbandRectangle(){
            rubberbandRectangle={top:0,left:0,width:0,height:0};
        }

        canvas.onmousedown=function(e){
            var x=e.clientX,
                y=e.clientY;
            e.preventDefault();
            rubberbandStart(x,y);
        }
        window.onmousemove=function(e){
            var x=e.clientX,
                y=e.clientY;
            e.preventDefault();
            if(dragging){
                rubberbandStretch(x,y);
            }
        }
        window.onmouseup=function(e){
            e.preventDefault();
            rubberbandEnd();
        }
        image.onload=function(){
            context.drawImage(image,0,0,canvas.width,canvas.height);
        }
        resetButton.onclick=function(e){
            context.clearRect(0,0,context.canvas.width,context.canvas.height);
            context.drawImage(image,0,0,canvas.width,canvas.height);
        }
        image.src='img/BC1.jpg';//图片换一张,我懒不想上图片了
    </script>
啊呜啦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QT的QRubberBand类的使用
希望我的博客，能帮上你解决学习中工作中所遇到的问题
12-22 1824
详细说明 QRubberBand类提供可以指示选择或边界的矩形或直线。 橡皮筋通常用于显示新的边界区域（例如在QSplitter或要取消对接的QDockWidget中）。从历史上讲，这是使用QPainter和XOR来实现的，但是这种方法并不总是能正常工作，因为渲染可以发生在橡皮筋下面的窗口中，但是在橡皮筋被“擦除”之前。 每当需要在给定区域周围绘制橡皮筋（或表示一条直线）时，都可以创建QRubberBand，然后调用setGeometry（），move（）或resize（）对其进行定位和调整大小。一种常见的
Android中橡皮筋回弹和平移缩放效果
weixin_41122292的博客
08-04 683
前言 由于最近在做一个view的平移缩放功能以及橡皮筋效果，不过网上查到的大多数都是分开实现的，所以我这里把这两种功能整合到了一起 代码实现 这里我写把效果分开来写，最后再合并 平移、缩放 import android.content.Context; import android.util.AttributeSet; import android.view.MotionEvent; import...
MFC拉框放大、缩小功能如何在鼠标移动时绘制透明矩形框
acoolgiser的博客
08-07 2952
1. 在OnMouseMove鼠标移动事件中写入代码： void ClmzWorkView::OnMouseMove(UINT nFlags, CPoint point) { if (LButtonDown == true) { CDC *pDC = GetDC(); pDC-&gt;SetROP2(R2_NOTXORPEN); CRect rect(startPt,e...
MFC绘图_拉框控制放大缩小
aideruike的专栏
08-30 4096
首先，这个功能类似各种软件中点击鼠标拉框来实现这个范围内放大或缩小的控制，效果图如下：
matlab 橡皮筋程序，放大图中图
07-11
matlab 橡皮筋程序，放大图中图，文本保存，matlab源程序。需自己拷贝到matlab中。 关键代码。全部代码稍后给出
mfc窗口分割双缓存图像显示
06-30
在本文中，我们将深入探讨如何在VS2008环境下，使用MFC（Microsoft Foundation Classes）框架实现一个具有窗口分割、双缓存图像显示及放大功能，并且支持左键绘图橡皮筋技术的项目。这个项目的实现涉及到多个关键...
rubberbandbox():橡皮筋盒选择-matlab开发
05-29
`rubberbandbox()`函数的调用非常简单，它会暂停MATLAB的执行，直到用户在当前图窗中拉出一个矩形框并释放鼠标。函数返回一个4元素的行向量，格式为 `[x y width height]`，其中`x`和`y`是矩形左下角的坐标，`width...
橡皮筋RECTTRACKER画矩形
03-06
这种技术通常应用于选择感兴趣区域（ROI，Region of Interest）或者进行图像分析时的边界框设定。RECTTRACKER是实现这一功能的一个工具或类库，它提供了橡皮筋效果，让用户能够像拉伸橡皮筋一样自由地调整矩形的大小...
C# winForm 图片裁剪代码(用户控件)
05-04
4. **界面设计**：为了提供类似QQ截图的用户体验，可能还包括添加一些辅助功能，比如放大镜查看、橡皮筋效果（拖动时边框随鼠标实时变化）、预览裁剪结果等。这些功能的实现需要额外的代码逻辑和可能的自定义控件。 ...
c#画图橡皮线效果c#画图橡皮线效果
08-25
c# 画图 橡皮线，采用ControlPaint.DrawReversibleFrame实现橡皮线效果
JavaScript拉框放大缩小
12-14
本范例在地图上绘制矩形区域，实现放大缩小地图的操作。
VC++橡皮筋矩形框的简单示例
04-05
VC++ 可拉伸橡皮筋矩形框的简单示例。
QtCharts图形移动和缩放
04-27
实现QtCharts曲线图移动和缩放（重新实现QChartView部分函数），主要功能如下： 1. 按住鼠标左键拖动曲线可移动曲线； 2. 滚动鼠标滚轮实现图形X轴方向的缩放； 3. 安装Ctrl，滚动鼠标滚轮实现图形Y轴方向的缩放； 4. 按鼠标右键恢复图形初始状态; 5. 缩放过程以鼠标当前位置为缩放中心； 6. 鼠标移动过程中会在左上角显示当前坐标。
mfc绘制任意图形，实现图形按比例缩小放大
02-26
通过右键点击代码编译完成的界面，可以绘制任意闭合的图形，在编辑栏点击放大倍数或缩小倍数，可实现图形缩小放大
橡皮筋式选取图片放大-Canvas学习第四天
RisaSama的博客
05-13 249
效果是，放入一张图片，然后截取某个区域就会将该区域放大。 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Rubber bands with layered element</title> <style> body { ...
实现地图放大（拉框和单击）、缩小（拉框和单击）、漫游操作的简易代码
热门推荐
GISSTAR的专栏
08-17 1万+
///         /// Zoom In         ///         ///         ///         private void btnItem_ZoomIn_Click(object sender, EventArgs e)
opengl橡皮筋画多边形
最新发布
07-01
### 回答1： OpenGL橡皮筋画多边形是一种使用OpenGL图形库绘制多边形形状的方法。它利用鼠标的移动轨迹来动态绘制多边形的边界。 实现这个功能需要几个步骤： 1. 初始化OpenGL的环境，创建窗口并设置视口和投影矩阵。 2. 在鼠标按下事件中，获取鼠标点击位置的坐标，并保存为多边形的第一个顶点。 3. 在鼠标移动事件中，获取鼠标当前位置的坐标，并根据之前保存的第一个顶点和当前位置来计算出多边形的其他顶点坐标。可以使用简单的算法，如直线连续相连来计算顶点坐标。 4. 在鼠标释放事件中，将最后一个计算出的顶点添加到多边形的顶点列表中。 5. 最后，使用OpenGL的绘制函数（如glBegin和glEnd）将多边形的顶点连接起来，形成一个完整的多边形。 需要注意的是，OpenGL是一种低级的图形库，需要手动进行绘制调用，并且需要处理鼠标事件和计算顶点坐标等操作。此外，还要考虑多边形的绘制顺序和顶点的连接方式，以确保多边形的边界能够正确地闭合。 总之，通过使用OpenGL的橡皮筋画多边形的方法，可以通过鼠标的移动轨迹实时地绘制多边形的边界。这个方法可以应用于各种需要动态绘制多边形形状的应用，如计算机辅助设计、图形编辑器等领域。 ### 回答2： OpenGL橡皮筋画多边形是一种通过鼠标交互绘制多边形的方法。具体实现过程如下： 首先，需要准备一个空的OpenGL窗口，设置好视口、投影矩阵等OpenGL参数。 接下来，需要捕捉鼠标的事件，包括鼠标按下、鼠标移动和鼠标释放等。 当鼠标按下时，记录下鼠标按下位置的坐标，并将其作为多边形的一个顶点。 当鼠标移动时，根据当前鼠标的位置，绘制一个虚线或虚线框作为橡皮筋效果。这可以通过将OpenGL的绘制模式设置为线段模式，并指定线段的样式来实现。 当鼠标释放时，将当前鼠标的位置作为最后一个多边形的顶点，并停止绘制橡皮筋。 最后，根据所记录的鼠标的位置坐标，使用OpenGL的绘图API，绘制多边形的边缘线段。 需要注意的是，在绘制边缘线段时，需要考虑到多边形的闭合性。即最后一个顶点需要与起始点相连，形成一个闭合的多边形。 同时，为了达到橡皮筋效果，可以使用计时器功能，定期刷新OpenGL窗口，重绘橡皮筋。 总结起来，实现OpenGL橡皮筋画多边形需要捕捉鼠标的事件，并根据鼠标的操作实时更新多边形的顶点坐标。在绘制多边形时，通过设置OpenGL的绘制模式和使用计时器功能，实现橡皮筋效果。 ### 回答3： OpenGL橡皮筋画多边形的基本原理是通过鼠标的交互来确定多边形的顶点，然后在OpenGL的窗口中绘制出来。 首先，我们需要定义一个鼠标按键触发的事件函数，当鼠标按下时，获取鼠标当前的位置，并将其作为多边形的第一个顶点。 然后，监听鼠标移动的事件函数，当鼠标移动时，根据当前鼠标位置绘制出一个实时更新的直线，表示橡皮筋的效果。这个直线的起点是多边形的第一个顶点，终点是当前鼠标的位置。 当鼠标再次按下时，将当前鼠标位置作为多边形的下一个顶点，并继续按照之前的步骤，实时更新直线并继续监听鼠标移动事件。 当鼠标右键按下时，表示多边形的绘制完成。此时，将最后一个鼠标位置作为多边形的最后一个顶点，并将多边形的所有顶点连接起来。最后，将多边形的边和填充颜色等绘制属性设置好，通过OpenGL的绘制函数进行绘制。 需要注意的是，当橡皮筋直线绘制时，应该利用OpenGL提供的双缓冲机制，将实时更新的直线绘制到后备缓冲区中，然后将整个后备缓冲区同步到前面的显示缓冲区，以避免闪烁问题。 总结来说，绘制OpenGL橡皮筋画多边形的步骤包括鼠标按下时初始化多边形的第一个顶点，监听鼠标移动时实时更新绘制橡皮筋直线，鼠标右键按下时结束多边形的绘制，并将多边形的边和填充颜色等属性设置好后进行绘制。同时，要注意使用双缓冲机制来避免闪烁问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值