VC实现图片拖拽及动画的实例

基础知识
1.PictureBox控件的使用
2.加载位图文件

1.通过文件路径获得位图句柄


代码如下:

//获得位图句柄 
void CMovePictureDlg::GetHandleFromPath(CString path) 

    hBitmap= (HBITMAP)::LoadImage(AfxGetInstanceHandle(),path,IMAGE_BITMAP,0,0,LR_CREATEDIBSECTION|LR_LOADFROMFILE);//创建位图句柄 
}

2.通过位图句柄创建位图对象并获得位图信息


代码如下:

//获取位图对象

void CMovePictureDlg::GetBitMap(HBITMAP hBitmap)

{

m_BitMap.Attach(hBitmap);//通过位图句柄创建位图对象

//获取图像信息

BITMAPINFOHEADER bminfo;

m_BitMap.GetObject(sizeof(bminfo),&bminfo);

//获取位图宽高

m_nBmpWidth=bminfo.biWidth;

m_nBmpHeight=bminfo.biHeight;

}

实现步骤:
1.创建一个对话框工程命名为MovePicture
2.打开对话框资源拖入一个PictureBox控件,设置ID为:IDC_PICTUREBOX,设置类型为:位图
3.拖入两个静态文本控件和两个编辑框控件,静态文本控件标题分别为:输入动量系数:、输入阻力系数:,编辑框ID分别为:IDC_EDITDV、IDC_EDITF,为IDC_EDITDV关联变量为:m_editDV,为IDC_EDITF关联变量为:m_editF
4.实现代码
头文件


代码如下:

// MovePictureDlg.h : header file 
// 
#include "PictureBox.h"

#if !defined(AFX_MOVEPICTUREDLG_H__6FFC1DDF_478C_43D6_B854_4D51E98D5E50__INCLUDED_)
#define AFX_MOVEPICTUREDLG_H__6FFC1DDF_478C_43D6_B854_4D51E98D5E50__INCLUDED_

#if _MSC_VER > 1000 
#pragma once 
#endif // _MSC_VER > 1000

///////////////////////////////////////////////////////////////////////////// 
// CMovePictureDlg dialog

class CMovePictureDlg : public CDialog 

// Construction 
public: 
    void GetBitMap(HBITMAP hBitmap); 
    void GetHandleFromPath(CString path); 
    void SetPicRect(int x,int y); 
    void SetSysPath(); 
    CMovePictureDlg(CWnd* pParent = NULL);  // standard constructor

// Dialog Data 
    //{{AFX_DATA(CMovePictureDlg) 
    enum { IDD = IDD_MOVEPICTURE_DIALOG }; 
    CEdit   m_editF; 
    CEdit   m_editDV; 
    //}}AFX_DATA

// ClassWizard generated virtual function overrides 
    //{{AFX_VIRTUAL(CMovePictureDlg) 
    protected: 
    virtual void DoDataExchange(CDataExchange* pDX);    // DDX/DDV support 
    //}}AFX_VIRTUAL

// Implementation 
protected: 
    HICON m_hIcon;

// Generated message map functions 
    //{{AFX_MSG(CMovePictureDlg) 
    virtual BOOL OnInitDialog(); 
    afx_msg void OnSysCommand(UINT nID, LPARAM lParam); 
    afx_msg void OnPaint(); 
    afx_msg HCURSOR OnQueryDragIcon(); 
    afx_msg void OnLButtonDown(UINT nFlags, CPoint point); 
    afx_msg void OnMouseMove(UINT nFlags, CPoint point); 
    afx_msg void OnLButtonUp(UINT nFlags, CPoint point); 
    afx_msg void OnTimer(UINT nIDEvent); 
    afx_msg void OnDestroy(); 
    //}}AFX_MSG 
    DECLARE_MESSAGE_MAP() 
private: 
    CString sysPath;//保存系统路径 
    CString bmpPath;//位图路径

HBITMAP hBitmap;//位图句柄 
    CBitmap m_BitMap;//位图对象 
    int m_nBmpWidth;//位图宽度 
    int m_nBmpHeight;//位图高度

CPictureBox* pictureBox;//图片控件 
    CRect picRect;//控件所占区域 
    BOOL isSelect;//判断控件是否被选中

BOOL isDown;//判断鼠标是否按下

CPoint oldPoint;//鼠标原始位置

CPoint startPoint;//移动起始位置

SYSTEMTIME startTime;//开始时间 
    SYSTEMTIME endTime;//结束时间

double vx;//x方向速度 
    double vy;//y方向速度

double f;//阻力 
    double dv;//动力增量

CRect clientRect;//客户区域 
};

//{{AFX_INSERT_LOCATION}} 
// Microsoft Visual C++ will insert additional declarations immediately before the previous line.

#endif // !defined(AFX_MOVEPICTUREDLG_H__6FFC1DDF_478C_43D6_B854_4D51E98D5E50__INCLUDED_)

实现文件


代码如下:

// MovePictureDlg.cpp : implementation file 
//

#include "stdafx.h" 
#include "MovePicture.h" 
#include "MovePictureDlg.h" 
#include <math.h>

#ifdef _DEBUG 
#define new DEBUG_NEW 
#undef THIS_FILE 
static char THIS_FILE[] = __FILE__; 
#endif

///////////////////////////////////////////////////////////////////////////// 
// CAboutDlg dialog used for App About

//计算时间差  
inline   __int64   TimeDiff(SYSTEMTIME left,SYSTEMTIME right)  
{  
    CTime   tmLeft(left.wYear,left.wMonth,left.wDay,0,0,0);  
    CTime   tmRight(left.wYear,left.wMonth,left.wDay,0,0,0);  
    CTimeSpan   sp;  
    sp   =   tmLeft   -   tmRight;//计算日期比较麻烦,就交给MFC去做吧  
    long   lLMinllis   =   (left.wHour*3600   +   left.wMinute*60   +   left.wSecond)*1000   +   left.wMilliseconds;  
    long   lRMinllis   =   (right.wHour*3600   +   right.wMinute*60   +   right.wSecond)*1000   +   right.wMilliseconds;

return   (__int64)sp.GetDays()*86400000   +   (lLMinllis   -   lRMinllis); 
}

class CAboutDlg : public CDialog 

public: 
    CAboutDlg();

// Dialog Data 
    //{{AFX_DATA(CAboutDlg) 
    enum { IDD = IDD_ABOUTBOX }; 
    //}}AFX_DATA

// ClassWizard generated virtual function overrides 
    //{{AFX_VIRTUAL(CAboutDlg) 
    protected: 
    virtual void DoDataExchange(CDataExchange* pDX);    // DDX/DDV support 
    //}}AFX_VIRTUAL

// Implementation 
protected: 
    //{{AFX_MSG(CAboutDlg) 
    //}}AFX_MSG 
    DECLARE_MESSAGE_MAP() 
};

CAboutDlg::CAboutDlg() : CDialog(CAboutDlg::IDD) 

    //{{AFX_DATA_INIT(CAboutDlg) 
    //}}AFX_DATA_INIT 
}

void CAboutDlg::DoDataExchange(CDataExchange* pDX) 

    CDialog::DoDataExchange(pDX); 
    //{{AFX_DATA_MAP(CAboutDlg) 
    //}}AFX_DATA_MAP 
}

BEGIN_MESSAGE_MAP(CAboutDlg, CDialog) 
    //{{AFX_MSG_MAP(CAboutDlg) 
        // No message handlers 
    //}}AFX_MSG_MAP 
END_MESSAGE_MAP()

///////////////////////////////////////////////////////////////////////////// 
// CMovePictureDlg dialog

CMovePictureDlg::CMovePictureDlg(CWnd* pParent /*=NULL*/) 
    : CDialog(CMovePictureDlg::IDD, pParent) 

    //{{AFX_DATA_INIT(CMovePictureDlg) 
    //}}AFX_DATA_INIT 
    // Note that LoadIcon does not require a subsequent DestroyIcon in Win32 
    m_hIcon = AfxGetApp()->LoadIcon(IDR_MAINFRAME);

isDown = FALSE;//初始化鼠标按下状态 
    isSelect = FALSE;//初始化选中状态 
    f = 0.05;//初始化阻力 
    dv = 5;//初始化动力增量 
}

void CMovePictureDlg::DoDataExchange(CDataExchange* pDX) 

    CDialog::DoDataExchange(pDX); 
    //{{AFX_DATA_MAP(CMovePictureDlg) 
    DDX_Control(pDX, IDC_EDITF, m_editF); 
    DDX_Control(pDX, IDC_EDITDV, m_editDV); 
    //}}AFX_DATA_MAP 
}

BEGIN_MESSAGE_MAP(CMovePictureDlg, CDialog) 
    //{{AFX_MSG_MAP(CMovePictureDlg) 
    ON_WM_SYSCOMMAND() 
    ON_WM_PAINT() 
    ON_WM_QUERYDRAGICON() 
    ON_WM_LBUTTONDOWN() 
    ON_WM_MOUSEMOVE() 
    ON_WM_LBUTTONUP() 
    ON_WM_TIMER() 
    ON_WM_DESTROY() 
    //}}AFX_MSG_MAP 
END_MESSAGE_MAP()

///////////////////////////////////////////////////////////////////////////// 
// CMovePictureDlg message handlers

//对话框初始化 
BOOL CMovePictureDlg::OnInitDialog() 

    CDialog::OnInitDialog();

// Add "About…" menu item to system menu.

// IDM_ABOUTBOX must be in the system command range. 
    ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX); 
    ASSERT(IDM_ABOUTBOX < 0xF000);

CMenu* pSysMenu = GetSystemMenu(FALSE); 
    if (pSysMenu != NULL) 
    { 
        CString strAboutMenu; 
        strAboutMenu.LoadString(IDS_ABOUTBOX); 
        if (!strAboutMenu.IsEmpty()) 
        { 
            pSysMenu->AppendMenu(MF_SEPARATOR); 
            pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu); 
        } 
    }

// Set the icon for this dialog.  The framework does this automatically 
    //  when the application's main window is not a dialog 
    SetIcon(m_hIcon, TRUE);         // Set big icon 
    SetIcon(m_hIcon, FALSE);        // Set small icon

// TODO: Add extra initialization here

pictureBox = (CPictureBox*)GetDlgItem(IDC_PICTUREBOX);//获得图片框指针

SetSysPath();//设置系统路径

bmpPath = sysPath+"//image.bmp";//设置位图路径

GetHandleFromPath(bmpPath);//创建位图句柄

GetBitMap(hBitmap);//获得位图

//设置位图控件区域 
    SetPicRect(0,0);

pictureBox->MoveWindow(picRect);//设置控件位置

//设置文本框值 
    CString strDV,strF; 
    strDV.Format("%f",dv); 
    strF.Format("%f",f);

m_editDV.SetWindowText(strDV); 
    m_editF.SetWindowText(strF); 
    return TRUE;  // return TRUE  unless you set the focus to a control 
}

void CMovePictureDlg::OnSysCommand(UINT nID, LPARAM lParam) 

    if ((nID & 0xFFF0) == IDM_ABOUTBOX) 
    { 
        CAboutDlg dlgAbout; 
        dlgAbout.DoModal(); 
    } 
    else 
    { 
        CDialog::OnSysCommand(nID, lParam); 
    } 
}

// If you add a minimize button to your dialog, you will need the code below 
//  to draw the icon.  For MFC applications using the document/view model, 
//  this is automatically done for you by the framework.

//重绘函数 
void CMovePictureDlg::OnPaint()  

    if (IsIconic()) 
    { 
        CPaintDC dc(this); // device context for painting

SendMessage(WM_ICONERASEBKGND, (WPARAM) dc.GetSafeHdc(), 0);

// Center icon in client rectangle 
        int cxIcon = GetSystemMetrics(SM_CXICON); 
        int cyIcon = GetSystemMetrics(SM_CYICON); 
        CRect rect; 
        GetClientRect(&rect); 
        int x = (rect.Width() – cxIcon + 1) / 2; 
        int y = (rect.Height() – cyIcon + 1) / 2;

// Draw the icon 
        dc.DrawIcon(x, y, m_hIcon); 
    } 
    else 
    {

this->GetClientRect(&clientRect);//获得客户区域大小

pictureBox->SetBitmap(hBitmap);//显示位图 
        CDialog::OnPaint(); 
    }

}

// The system calls this to obtain the cursor to display while the user drags 
//  the minimized window. 
HCURSOR CMovePictureDlg::OnQueryDragIcon() 

    return (HCURSOR) m_hIcon; 
}

//鼠标左键按下 
void CMovePictureDlg::OnLButtonDown(UINT nFlags, CPoint point)  

    // TODO: Add your message handler code here and/or call default

isDown=TRUE;//鼠标按下

if(PtInRect(picRect,point))//鼠标在图片区域按下 
    { 
        isSelect=TRUE;//图片选中

oldPoint = point;//记录下鼠标位置 
        startPoint = point;//记录下鼠标起始位置

GetSystemTime(&startTime);//得到当前时间 
    }

CDialog::OnLButtonDown(nFlags, point); 
}

//鼠标左键弹起 
void CMovePictureDlg::OnLButtonUp(UINT nFlags, CPoint point)  

    // TODO: Add your message handler code here and/or call default

isDown=FALSE;//鼠标弹起

if(isSelect) 
    { 
        CString strDV,strF; 
        m_editDV.GetWindowText(strDV); 
        m_editF.GetWindowText(strF);

dv = atof(strDV); 
        f = atof(strF);

isSelect=FALSE;//释放图片

GetSystemTime(&endTime);//得到当前时间

double dx = point.x-startPoint.x;//计算x轴位移 
        double dy = point.y-startPoint.y;//计算y轴位移

int s = TimeDiff(endTime,startTime);//计算时间差

//double r = sqrt(dx*dx+dy*dy);//计算鼠标位移长度 
        //double v=r/s;//求平均速度

vx=dv*dx/s;//x轴平均速度 
        vy=dv*dy/s;//y轴平均速度

SetTimer(1,1,NULL);//设置定时器 
    }

CDialog::OnLButtonUp(nFlags, point); 
}

//鼠标移动 
void CMovePictureDlg::OnMouseMove(UINT nFlags, CPoint point)  

    // TODO: Add your message handler code here and/or call default

if(isDown&&isSelect)//在鼠标按下状态下移动 
    { 
        int dx = point.x-oldPoint.x;//计算x值的相对变化 
        int dy = point.y-oldPoint.y;//计算y值的相对变化

//重新设置PictureBox位置 
        picRect.left=picRect.left+dx; 
        picRect.top=picRect.top+dy;

SetPicRect(picRect.left,picRect.top);//重置图片位置

pictureBox->MoveWindow(picRect.left,picRect.top,m_nBmpWidth,m_nBmpHeight);//改变图片框大小

oldPoint=point;//重置原始坐标 
    }

CDialog::OnMouseMove(nFlags, point); 
}

//设置系统路径 
void CMovePictureDlg::SetSysPath() 

    //获取当前路径,保存到字符数组strBuff中 
    char strBuff[256]; 
    GetCurrentDirectory(256,strBuff);  
    sysPath.Format("%s",strBuff);//将路径保存到全局变量中 
}

//设置控件区域 
void CMovePictureDlg::SetPicRect(int x, int y) 

    picRect.top=y; 
    picRect.bottom=picRect.top+m_nBmpHeight; 
    picRect.left=x; 
    picRect.right=picRect.left+m_nBmpWidth; 
}

//获得位图句柄 
void CMovePictureDlg::GetHandleFromPath(CString path) 

    hBitmap= (HBITMAP)::LoadImage(AfxGetInstanceHandle(),path,IMAGE_BITMAP,0,0,LR_CREATEDIBSECTION|LR_LOADFROMFILE);//创建位图句柄 
}

//获取位图对象 
void CMovePictureDlg::GetBitMap(HBITMAP hBitmap) 

   m_BitMap.Attach(hBitmap);//通过位图句柄创建位图对象

//获取图像信息 
    BITMAPINFOHEADER bminfo;  
    m_BitMap.GetObject(sizeof(bminfo),&bminfo);

//获取位图宽高 
    m_nBmpWidth=bminfo.biWidth; 
    m_nBmpHeight=bminfo.biHeight; 
}

//定时器事件 
void CMovePictureDlg::OnTimer(UINT nIDEvent)  

    // TODO: Add your message handler code here and/or call default

if(abs(vx)>abs(vy))//当水平速度大于垂直速度时,只改变水平方向增量 
    { 
        if(picRect.left==clientRect.left) 
        { 
            vx=-vx; 
        } 
        if(picRect.left==clientRect.right-m_nBmpWidth) 
        { 
            vx=-vx; 
        } 
        picRect.left+=vx; 
    } 
    else if(abs(vx)<abs(vy))//当水平速度小于垂直速度时,只改变垂直方向增量 
    { 
        if(picRect.top==clientRect.top) 
        { 
            vy=-vy; 
        } 
        if(picRect.top==clientRect.bottom-m_nBmpHeight) 
        { 
            vy=-vy; 
        } 
        picRect.top+=vy; 
    }

//边界判断 
    if(picRect.left<clientRect.left) 
    { 
        picRect.left=clientRect.left; 
    } 
    if(picRect.left>clientRect.right-m_nBmpWidth) 
    { 
        picRect.left=clientRect.right-m_nBmpWidth; 
    } 
    if(picRect.top<clientRect.top) 
    { 
        picRect.top=clientRect.top; 
    } 
    if(picRect.top>clientRect.bottom-m_nBmpHeight) 
    { 
        picRect.top=clientRect.bottom-m_nBmpHeight; 
    }

pictureBox->MoveWindow(picRect.left,picRect.top,m_nBmpWidth,m_nBmpHeight);//改变图片框大小

//增量递减,匀减速运动 
    if(vx>0) 
    { 
        vx-=f; 
        if(vx<0) 
        { 
            vx=0; 
        } 
    } 
    else if(vx<0) 
    { 
        vx+=f; 
        if(vx>0) 
        { 
            vx=0; 
        } 
    }

if(vy>0) 
    { 
        vy-=f; 
        if(vy<0) 
        { 
            vy=0; 
        } 
    } 
    else if(vy<0) 
    { 
        vy+=f; 
        if(vy>0) 
        { 
            vy=0; 
        } 
    }

SetPicRect(picRect.left,picRect.top);//重置图片位置

CDialog::OnTimer(nIDEvent); 
}

void CMovePictureDlg::OnDestroy()  

    CDialog::OnDestroy();

// TODO: Add your message handler code here 
    this->KillTimer(1);//销毁定时器 
}

1.在对话框中添加一PictureBox控件,设置ID为IDC_PICTUREBOX,类型为位图
2.创建CPictureBox类继承于CStatic
3.在对话框类中声明
CPictureBox* pictureBox;//图片控件
4.在对话框类的OnInitDialog方法中获得控件指针
pictureBox = (CPictureBox*)GetDlgItem(IDC_PICTUREBOX);//获得图片框指针
5.显示位图
pictureBox->SetBitmap(hBitmap);//显示位图
6.设置控件位置
pictureBox->MoveWindow(picRect);//设置控件位置

(0)

相关推荐

  • VC运用OPENGL加载BMP纹理图的实现方法汇总

    OpenGL是专业的图形程序接口,功能非常强大,调用方便的底层图形库.本文汇总了运用OPENGL加载BMP纹理图的几个实现方法. 方法一: 首先获取位图句柄: HBITMAP hBmp = (HBITMAP) ::LoadImage (AfxGetResourceHandle(),MAKEINTRESOURCE(IDB_BITMAP1), IMAGE_BITMAP, 0, 0,LR_CREATEDIBSECTION); 然后根据位图句柄得到位图信息: BITMAP BM; ::GetObject

  • CISBitmap派生的VC++位图透明类实例

    本文所述为一个由CISBitmap派生的VC++位图透明类,可以方便实现BMP图像的透明处理,主要包含两个文件,使用时主需要将其引入到你的C++工程中即可,具体的类代码如下: CISBitmap.cpp文件代码如下: #include <stdafx.h> #include "CISBitmap.h" #ifdef _DEBUG #undef THIS_FILE static char THIS_FILE[]=__FILE__; #define new DEBUG_NEW

  • VC++实现的OpenGL线性渐变色绘制操作示例

    本文实例讲述了VC++实现的OpenGL线性渐变色绘制操作.分享给大家供大家参考,具体如下: 用到的思路就是在应力的最大值和最小值之间划分区间,每个区间的标识点对应不同的颜色值. 然后在区间内的应力值对应的颜色就进行插值来计算. 代码如下: #include <GL/glut.h> #include <iostream> #include <cmath> using namespace std; const GLsizei width=640; const GLsize

  • Cocos2d-x学习笔记之世界坐标系、本地坐标系、opengl坐标系、屏幕坐标系

    cocos2d-x的坐标系很重要,想要学好该引擎,深入理解它的坐标体系很重要.注释写的很清楚了,对照上运行结果一块来看代码吧! bool HelloWorld::init() { bool bRet = false; do { CC_BREAK_IF(! CCLayer::init()); //opengl的坐标系和世界坐标系相同,都是以屏幕左下角为原点,向右为x轴的增加方向,向上为y轴的增加方向 //这里的世界指的是游戏世界 //屏幕坐标系是以左上角为原点,是我们熟悉的 //本地坐标系也叫节点

  • VC++中图像处理类CBitmap的用法

    VC++中图像处理类CBitmap的用法 class CBitmap : public CGdiObject { DECLARE_DYNAMIC(CBitmap) public: static CBitmap* PASCAL FromHandle(HBITMAP hBitmap); // Constructors CBitmap(); BOOL LoadBitmap(LPCTSTR lpszResourceName); BOOL LoadBitmap(UINT nIDResource); BOO

  • VC++实现View内容保存为图片的方法

    本文实例讲述了VC++实现View内容保存为图片的方法.分享给大家供大家参考,具体如下: 我们在单文档应用程序中,经常需要将View中的内容保存为各种格式的图片文件,以便打印.乍一看,可能不知道从哪里下手,其实主要就是用到Bitmap的save方法,如: HDC hmemDC = ::CreateCompatibleDC( hdc ); HBITMAP hBmp = ::CreateCompatibleBitmap( hdc, destRect.Width(),destRect.Height()

  • VC++基于Dx实现的截图程序示例代码

    本文所述的程序示例为VC++图象特效的截图示例,需要DirectX 3.0以上版,代码中的GetScreen函数是本截图程序的关键.运行这个程序可用Esc键结束.代码中需要ddutil.h与ddutil.cpp文件,请自行下载添加.关于InitDDraw()函数,功能是初始化DirectDraw环境,创建换页链(主页面,一个后台缓冲区),以及创建一个定时器. 具体的功能代码如下: #include <windows.h> #include <windowsx.h> #include

  • 双缓冲解决VC++绘图时屏幕闪烁

    通常来说程序根据需要调用Invalidate(FALSE)使窗口客户区无效引起重绘,然后在窗口OnPaint函数(基于文档视图的程序则是OnDraw)中进行稳定绘图就行了.但是,我们在OnPaint中进行多重绘制(画背景.棋盘.棋子等),前后绘制的反差造成了闪烁现象.以前知道Java中解决屏幕闪烁问题是用双缓冲的方法,现在发现在vc++中也是可以这么做的.简单来说,双缓冲就是先把需要绘制的东西全部一口气画在内存中,最后把内存中的数据搬到屏幕上显示. 最近做中国象棋,绘制界面时遇到些问题,绘图过程

  • VC实现图片拖拽及动画的实例

    基础知识 1.PictureBox控件的使用 2.加载位图文件 1.通过文件路径获得位图句柄 复制代码 代码如下: //获得位图句柄  void CMovePictureDlg::GetHandleFromPath(CString path)  {      hBitmap= (HBITMAP)::LoadImage(AfxGetInstanceHandle(),path,IMAGE_BITMAP,0,0,LR_CREATEDIBSECTION|LR_LOADFROMFILE);//创建位图句柄

  • 基于js实现的图片拖拽排序源码实例

    效果图: 直接上代码 <script> window.onload = function() { var oUl = document.getElementById("ul1"); var aLi = oUl.getElementsByTagName("li"); var disX = 0; var disY = 0; var minZindex = 1; var aPos = []; for (var i = 0; i < aLi.length;

  • 微信小程序图片上传组件实现图片拖拽排序

    目录 引言 首先来看效果 组件设计 使用方式 总结 引言 图片上传组件是一个组件库目前来看必不可少的功能了.笔者近日给自己开源的toy工具库也添加了这一功能.相比原生和大部分组件库来说,它不仅支持长按提示删除,还能够支持图片的拖拽排序,很是nice! (也是为了毕设时身边同学能够更快上手小程序,更加将中心侧重于逻辑和设计) 本文我将继续介绍组件的设计思路: 首先来看效果 对于组件内部来说.笔者提供了一个参数去让开发者决定是否应该在场景中支持拖动排序.这里略去这些无关代码. 拖拽排序功能使用了微信

  • JavaScript实现文字与图片拖拽效果的方法

    本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JavaScript实现文字与图片的拖拽效果</title> <style type="text/css"> *{padding:0;margin:0;} .tips{position:absolute;background:#eee;} </style

  • js css3实现图片拖拽效果

    本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ text-align: center; } .container{ display: flex; just

  • JS实现简易的图片拖拽排序实例代码

    由HTML5的拖放API,实现的简易图片拖放效果. 一.HTML5拖放API的知识点 首先我们得知道元素怎么才可以被拖放,需要设置它们的draggable属性,其中img和a标签的dragable属性默认是true,不需要我们手动设置. 拖放API的监听事件如下: dragstart: 源对象拖拽开始: drag: 源对象拖拽的过程中: dragend: 源对象拖拽结束: dragenter: 进入过程对象区域; dragover: 在过程对象区域内移动: dragleave: 离开过程对象区域

  • android 大图片拖拽并缩放实现原理

    由于最近项目忙,博客一直没有时间更新,今天有点时间就连续更新两篇吧,过过瘾. 这篇图片拖拽缩放也是我在项目中用到的,今天整理一下,将源码奉献给大家,希望对大家以后碰到相似的问题有帮助. 这篇就不做过多介绍了,直接上源码: 复制代码 代码如下: public class SpacePageActivity extends Activity { private LinearLayout linnerLayout_spacepage; private RelativeLayout relativeLa

  • WinForm实现的图片拖拽与缩放功能示例

    本文实例讲述了WinForm实现的图片拖拽与缩放功能.分享给大家供大家参考,具体如下: 最近做项目的时候遇到上传施工平面布置图,查看,因为图片比较大,一般的显示器分辨率无法显示全,然后还需要放大看清楚图片里面的文字内容,所以需要用到图片的拖拽与缩放功能.这里整理下具体操作. 首先新建一个窗体,拖一个panel控件到窗体中,然后在拖一个pictureobx控件到panel中,然后在添加个上传图片的按钮: 具体代码: using System; using System.Collections.Ge

  • 基于vue-simplemde实现图片拖拽、粘贴功能

    项目使用的是vue框架,需要一个markdown的编辑框,就在npm上找了一下,发现simplemde挺不错的,由于我比较懒,就顺便在npm又搜了一下,找到了vue-simplemde这个 package ,那就开始使用它吧. 但是这个 vue-simplemde 不支持图片拖拽上传.粘贴上传,也不能说是因为这个 vue-simplemde ,因为 vue-simplemde 只是对 simplemde 的基础上封装成一个Vue插件.所以最后还是由于 simplemde 没有提供相关的功能,但是

  • JS实现图片拖拽交换效果

    JS实现图片拖拽交换效果,供大家参考,具体内容如下 听 WEB前端javascript企业实战班 公开课,用JS实现了图片拖拽交换的目的:感谢老师的讲解. 实现要点 鼠标点击onmousedown:获取鼠标在页面上可视区域的位置(clientX, clientY)和元素外边框距已定位父元素容器的位置(offsetLeft,offsetTop): 鼠标移动onmousemove: 获取鼠标在页面上可视区域的位置(clientX, clientY),并实时改变目标元素位置:进行碰撞检测,同时计算被碰

随机推荐