graphics - 有谁知道拖放、可重新排序的列表的低级（无框架）示例？

Question

我正在寻找可以通过拖放重新排序的基本图形列表的代码（任何语言）。所以正是这个功能http://jqueryui.com/sortable/但直接写在帧缓冲区/画布上，没有任何框架（或最多低级“放置像素”库），可能不在 HTML/JS 中（除非它只是 Canvas没有 CSS）。

越简单越好，因为我将在汇编程序中使用它，如果不需要，我不想重新发明轮子。

score 2 · Accepted Answer

呵呵，我讨厌框架，所以这对我来说很容易...

这是我几年前在课堂上为我的学生编写的代码：

http://ulozto.net/x2b7WLwJ/select-drag-drop-zip

这是主引擎代码（完整的项目 + exe 在上面的那个 zip 中）：

//---------------------------------------------------------------------------
//--- Constants: ------------------------------------------------------------
//---------------------------------------------------------------------------
const int _select_max_l=16;
const int _select_max_ll=_select_max_l*_select_max_l;
const int _half_size=10;
const int _atoms_max=32;
//---------------------------------------------------------------------------
enum _atom_type_enum        //++++
        {
        _atom_type_non=0,
        _atom_type_kruh,
        _atom_type_stvorec,
        _atom_type_enum_end
        };
//---------------------------------------------------------------------------
enum _editor_edit_mode_enum //****
        {
        _editor_edit_mode_non=0,
        _editor_edit_mode_move,
        _editor_edit_mode_mov,
        _editor_edit_mode_add_kruh,
        _editor_edit_mode_add_stvorec,
        _editor_edit_mode_del,
        _editor_edit_mode_enum_end
        };
//---------------------------------------------------------------------------
//--- viewer: ---------------------------------------------------------------
//---------------------------------------------------------------------------
class viewer
        {
public: int x0,y0;
        viewer() { x0=0; y0=0; }
        void world2screen(int &sx,int &sy,int wx,int wy) { sx=wx-x0; sy=wy-y0; }
        void screen2world(int &wx,int &wy,int sx,int sy) { wx=sx+x0; wy=sy+y0; }
        void world2screen(int &sl,int wl) { sl=wl; }
        void screen2world(int &wl,int sl) { wl=sl; }
        };
//---------------------------------------------------------------------------
//--- atom kruh: ------------------------------------------------------------
//---------------------------------------------------------------------------
class atom_kruh
        {
public: int x,y,r;      // world coordinates
        TColor col0,col1,col2;
        AnsiString str;
        atom_kruh() { x=0; y=0; r=_half_size; str=""; col0=clBlue; col1=clAqua; col2=clWhite; }
        void draw(TCanvas *scr,const viewer &view)
            {
            int xx,yy,rr;
            view.world2screen(xx,yy,x,y);
            view.world2screen(rr,r);
            scr->Brush->Color=col0;
            scr->Pen  ->Color=col1;
            scr->Font ->Color=col2;
            scr->Ellipse(xx-rr,yy-rr,xx+rr,yy+rr);
            scr->Brush->Style=bsClear;
            xx-=scr->TextWidth(str)>>1;
            yy-=scr->TextHeight(str)>>1;
            scr->TextOutA(xx,yy,str);
            scr->Brush->Style=bsSolid;
            }
        bool select(int &ll,int wx,int wy)
            {
            int qq,xx,yy;
            xx=wx-x; xx*=xx;
            yy=wy-y; yy*=yy;
            qq=xx+yy;
            if ((qq<=_select_max_ll)&&((qq<=ll)||(ll<0))) { ll=qq; return true; }
            return false;
            }
        };
//---------------------------------------------------------------------------
//--- atom kruh: ------------------------------------------------------------
//---------------------------------------------------------------------------
class atom_stvorec
        {
public: int x,y,r;      // world coordinates
        TColor col0,col1,col2;
        AnsiString str;
        atom_stvorec() { x=0; y=0; r=_half_size; str=""; col0=clBlue; col1=clAqua; col2=clWhite; }
        void draw(TCanvas *scr,const viewer &view)
            {
            int xx,yy,rr;
            view.world2screen(xx,yy,x,y);
            view.world2screen(rr,r);
            scr->Brush->Color=col0;
            scr->Pen  ->Color=col1;
            scr->Font ->Color=col2;
            scr->Rectangle(xx-rr,yy-rr,xx+rr,yy+rr);
            scr->Brush->Style=bsClear;
            xx-=scr->TextWidth(str)>>1;
            yy-=scr->TextHeight(str)>>1;
            scr->TextOutA(xx,yy,str);
            scr->Brush->Style=bsSolid;
            }
        bool select(int &ll,int wx,int wy)
            {
            int qq,xx,yy;
            xx=wx-x; xx*=xx;
            yy=wy-y; yy*=yy;
            qq=xx+yy;
            if ((qq<=_select_max_ll)&&((qq<=ll)||(ll<0))) { ll=qq; return true; }
            return false;
            }
        };
//---------------------------------------------------------------------------
//---------------------------------------------------------------------------
//---------------------------------------------------------------------------
class editor
        {
public: Graphics::TBitmap *bmp;         // back buffer
        int xs,ys;

        int sel_ix,sel_tp;              // actual mouse selected item
        int edit_mode;                  // selected edit tool
        viewer view;                    // view
        bool redraw;                    // redraw needed?
        bool locked;                    // edit in progress?

        WORD key,key0;
        int mx,my,mx0,my0;
        TShiftState sh,sh0;

        atom_kruh    kruh[_atoms_max];  // all object lists
        atom_stvorec stvorec[_atoms_max];
        int kruhov;
        int stvorcov;

        editor();
        ~editor();

        void resize(int _xs,int _ys);   // interface with window
        void draw();
        void mouse(int x,int y,TShiftState s) { mx0=mx; my0=my; sh0=sh; mx=x; my=y; sh=s; edit(); }
        void keys(WORD k,TShiftState s) { key0=key; sh0=sh; key=k; sh=s; edit(); }

        void select();                  // helper functions
        void edit();
        void move       (bool q0,bool q1,int x,int y,int dx,int dy);
        void mov        (bool q0,bool q1,int x,int y,int dx,int dy);
        void add_kruh   (bool q0,bool q1,int x,int y,int dx,int dy);
        void add_stvorec(bool q0,bool q1,int x,int y,int dx,int dy);
        void del        (bool q0,bool q1,int x,int y,int dx,int dy);
        };
//---------------------------------------------------------------------------
editor::editor()
        {
        bmp=new Graphics::TBitmap;
        resize(1,1);

        sel_ix=-1;
        sel_tp=_atom_type_non;
        edit_mode=_editor_edit_mode_non;
        key=0;  key0=0;
        mx=0;   mx0=0;
        my=0;   my0=0;
        locked=false;

        kruhov=0;
        stvorcov=0;
        }
//---------------------------------------------------------------------------
editor::~editor()
        {
        delete bmp;
        }
//---------------------------------------------------------------------------
void editor::resize(int _xs,int _ys)
        {
        bmp->Width=_xs;
        bmp->Height=_ys;
        xs=bmp->Width;
        ys=bmp->Height;
        redraw=true;
        }
//---------------------------------------------------------------------------
void editor::draw()
        {
        int i;
        if (!redraw) return;
        redraw=false;
        bmp->Canvas->Brush->Color=clBlack;
        bmp->Canvas->FillRect(Rect(0,0,xs,ys));
        //++++
        for (i=0;i<kruhov  ;i++) kruh[i]   .draw(bmp->Canvas,view);
        for (i=0;i<stvorcov;i++) stvorec[i].draw(bmp->Canvas,view);
        }
//---------------------------------------------------------------------------
void editor::select()
        {
        int i,wx,wy,ll;
        int sel_tp0=sel_tp; sel_tp=_atom_type_non;
        int sel_ix0=sel_ix; sel_ix=-1;
        view.screen2world(wx,wy,mx,my);
        //++++
        ll=-1;
        for (i=0;i<kruhov  ;i++) if (kruh[i]   .select(ll,wx,wy)) { sel_tp=_atom_type_kruh;    sel_ix=i; };
        for (i=0;i<stvorcov;i++) if (stvorec[i].select(ll,wx,wy)) { sel_tp=_atom_type_stvorec; sel_ix=i; };
        if (sel_tp!=sel_tp0) redraw=true;
        if (sel_ix!=sel_ix0) redraw=true;
        }
//---------------------------------------------------------------------------
void editor::edit()
        {
        bool q0,q1;
        int x,y,dx,dy;
        x=mx; dx=mx-mx0;
        y=my; dy=my-my0;
        view.screen2world( x, y, x, y);
        view.screen2world(dx,dx);
        view.screen2world(dy,dy);
        q0=sh0.Contains(ssLeft);
        q1=sh .Contains(ssLeft);
        if (!locked) select();
        //****
        if(edit_mode==_editor_edit_mode_mov)        mov         (q0,q1,x,y,dx,dy);
        if(edit_mode==_editor_edit_mode_add_kruh)   add_kruh    (q0,q1,x,y,dx,dy);
        if(edit_mode==_editor_edit_mode_add_stvorec)add_stvorec (q0,q1,x,y,dx,dy);
        if(edit_mode==_editor_edit_mode_del)        del         (q0,q1,x,y,dx,dy);

        q0=sh0.Contains(ssRight);
        q1=sh .Contains(ssRight);
        if (!locked) move(q0,q1,x,y,dx,dy);
        }
//---------------------------------------------------------------------------
void editor::move   (bool q0,bool q1,int x,int y,int dx,int dy)
        {
        if ((sel_ix>=0)&&(sel_tp!=_atom_type_non)) return;
        if (q1)
            {
            view.x0-=dx;
            view.y0-=dy;
            redraw=true;
            }
        }
//---------------------------------------------------------------------------
void editor::mov        (bool q0,bool q1,int x,int y,int dx,int dy)
        {
        if ((!locked)&&((sel_ix<0)||(sel_tp==_atom_type_non))) return;
        locked=false;
        if ((q1)||((q0)&&(!q1)))
            {
            //++++
            if (sel_tp==_atom_type_kruh)
                {
                kruh[sel_ix].x=x;
                kruh[sel_ix].y=y;
                }
            if (sel_tp==_atom_type_stvorec)
                {
                stvorec[sel_ix].x=x;
                stvorec[sel_ix].y=y;
                }
            locked=true;
            }
        if (!q1) locked=false;
        redraw=true;
        }
//---------------------------------------------------------------------------
void editor::add_kruh   (bool q0,bool q1,int x,int y,int dx,int dy)
        {
        if ((!locked)&&(sel_ix>=0)&&(sel_tp!=_atom_type_non)) return;
        locked=false;
        if (kruhov>=_atoms_max) return;
        if ((!q0)&&( q1))
            {
            sel_tp=_atom_type_kruh;
            sel_ix=kruhov;
            kruhov++;
            kruh[sel_ix].x=x;
            kruh[sel_ix].y=y;
            kruh[sel_ix].str=kruhov;
            locked=true;
            }
        if (( q0)&&( q1))
            {
            kruh[sel_ix].x=x;
            kruh[sel_ix].y=y;
            locked=true;
            }
        if (( q0)&&(!q1))
            {
            kruh[sel_ix].x=x;
            kruh[sel_ix].y=y;
            }
        if ((!q0)&&(!q1))
            {
            }
        redraw=true;
        }
//---------------------------------------------------------------------------
void editor::add_stvorec(bool q0,bool q1,int x,int y,int dx,int dy)
        {
        if ((!locked)&&(sel_ix>=0)&&(sel_tp!=_atom_type_non)) return;
        locked=false;
        if (stvorcov>=_atoms_max) return;
        if ((!q0)&&( q1))
            {
            sel_tp=_atom_type_stvorec;
            sel_ix=stvorcov;
            stvorcov++;
            stvorec[sel_ix].x=x;
            stvorec[sel_ix].y=y;
            stvorec[sel_ix].str=stvorcov;
            locked=true;
            }
        if (( q0)&&( q1))
            {
            stvorec[sel_ix].x=x;
            stvorec[sel_ix].y=y;
            locked=true;
            }
        if (( q0)&&(!q1))
            {
            stvorec[sel_ix].x=x;
            stvorec[sel_ix].y=y;
            }
        if ((!q0)&&(!q1))
            {
            }
        redraw=true;
        }
//---------------------------------------------------------------------------
void editor::del        (bool q0,bool q1,int x,int y,int dx,int dy)
        {
        locked=false;
        if ((sel_ix<0)||(sel_tp==_atom_type_non)) return;
        if ((!q0)&&( q1))
            {
            //++++
            if (sel_tp==_atom_type_kruh)
             if (kruhov>0)
                {
                kruhov--;
                kruh[sel_ix]=kruh[kruhov];
                }
            if (sel_tp==_atom_type_stvorec)
             if (stvorcov>0)
                {
                stvorcov--;
                stvorec[sel_ix]=stvorec[stvorcov];
                }
            sel_ix=-1;
            sel_tp=_atom_type_non;
            }
        redraw=true;
        }
//---------------------------------------------------------------------------

抱歉，它不完全是英文的

kruh表示圆圈
stvorec表示正方形

这是窗口代码（BDS2006 VCL风格）

//$$---- Form CPP ----
//---------------------------------------------------------------------------
#include <vcl.h>
#pragma hdrstop
#include "Unit1.h"
#include "editor.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
editor edit;
int x0,y0;
//---------------------------------------------------------------------------
//---------------------------------------------------------------------------
//---------------------------------------------------------------------------
void draw() // redraw app screen
    {
    edit.draw();
    Form1->Canvas->Draw(x0,y0,edit.bmp);
    // here just some info print outs
    int dy=16,x=x0,y=y0-dy;
    Form1->Canvas->Font->Color=clAqua;
    Form1->Canvas->Brush->Style=bsClear;
    Form1->Canvas->TextOutA(x,y+=dy,AnsiString().sprintf("locked: %i",edit.locked));
    Form1->Canvas->TextOutA(x,y+=dy,AnsiString().sprintf("Key: %d",edit.key));
    Form1->Canvas->TextOutA(x,y+=dy,AnsiString().sprintf("sel_tp: %i",edit.sel_tp));
    Form1->Canvas->TextOutA(x,y+=dy,AnsiString().sprintf("sel_ix: %i",edit.sel_ix));
    Form1->Canvas->TextOutA(x,y+=dy,AnsiString().sprintf("kruhov: %i",edit.kruhov));
    Form1->Canvas->TextOutA(x,y+=dy,AnsiString().sprintf("stvorcov: %i",edit.stvorcov));
    Form1->Canvas->Brush->Style=bsSolid;
    }
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner):TForm(Owner) // init app
    {
    // select tool on app start
    bt_tool_kruhClick(this);
    }
//--- window events: ---------------------------------------------------------
void __fastcall TForm1::FormPaint(TObject *Sender) { draw(); }
void __fastcall TForm1::FormResize(TObject *Sender) { x0=pan_top->Left; y0=pan_top->Height; edit.resize(ClientWidth-x0,ClientHeight-y0); draw(); }
void __fastcall TForm1::FormActivate(TObject *Sender) { draw(); }
//---------------------------------------------------------------------------
void __fastcall TForm1::FormKeyDown(TObject *Sender, WORD &Key, TShiftState Shift)                          { edit.keys(Key,Shift); draw(); }
void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift, int X, int Y)                     { edit.mouse(X-x0,Y-y0,Shift); draw(); }
void __fastcall TForm1::FormMouseDown(TObject *Sender, TMouseButton Button, TShiftState Shift, int X, int Y){ edit.mouse(X-x0,Y-y0,Shift); draw(); }
void __fastcall TForm1::FormMouseUp(TObject *Sender, TMouseButton Button, TShiftState Shift, int X, int Y)  { edit.mouse(X-x0,Y-y0,Shift); draw(); }
//---------------------------------------------------------------------------
void __fastcall TForm1::bt_tool_kruhClick(TObject *Sender) // event on any tool button click
    {
    // select editor tool mode ...
    edit.edit_mode=_editor_edit_mode_non;
    if (bt_tool_kruh   ->Down) edit.edit_mode=_editor_edit_mode_add_kruh;
    if (bt_tool_stvorec->Down) edit.edit_mode=_editor_edit_mode_add_stvorec;
    if (bt_tool_move   ->Down) edit.edit_mode=_editor_edit_mode_mov;
    if (bt_tool_delete ->Down) edit.edit_mode=_editor_edit_mode_del;
    }
//---------------------------------------------------------------------------

窗口只有工具按钮（由同一个guid4锁定在一起，因此一次只能关闭一个）

添加圆形工具
添加方形工具
移动工具
删除工具

为了简单起见，一切都是静态分配的

[编辑1] 更多信息

创建 gfx 对象数据类型/类 ( atom_xxxx)

它应该size,position,shape包含对象的视觉 gfx 表示。添加连接变量（对象type和对象index应该连接到什么）。在里面添加真实的对象/数据
对象 ID

我在用int tp,ix;
- tp表示对象的类型
- ix表示类型对象列表中的索引tp
编辑器引擎

这也应该是类或变量和函数集。它应该包含整个编辑的世界（对象列表）：
- 可视化变量，如屏幕/后台缓冲区位图或渲染上下文、鼠标位置、选择列表
- 添加功能/事件，如onmouse, onkey, draw,...
- 添加编辑功能它应该能够select,add,del,move（拖放）对象。理想地由一组命令控制以简化撤消/重做操作
- 添加undo/redo
- 添加save,load
- 添加您想要的模拟功能
如果我没有忘记什么，那就是全部了。
创建应用程序GUI界面

所以创建窗口，为每个工具、菜单和任何你需要的东西添加带有按钮的面板。为鼠标、键盘、重绘、调整大小、拖放、...添加事件我的示例如下所示：

全局添加editor edit;或作为其中的成员添加。如果您以后想拥有MDI ，则成员选项会更好。在编辑和窗口之间添加事件接口（第二个源代码）。

[笔记]

++++如果将任何原子类型添加到系统中，则标记需要添加更改的部分代码
****如果将任何编辑模式添加到系统中，则标记需要添加更改的部分代码

抱歉，如果您需要澄清一些评论我，请不要添加更多评论代码。

希望对您有所帮助...

graphics - 有谁知道拖放、可重新排序的列表的低级（无框架）示例？

1 回答 1

Related

Reference