sd基础元素

基础元素

目前在sd中有6种基本元素：Rect，Circle，Text，Path，Line，Image，如下图所示：

每一个元素都是可以拖拽和缩放的（在上图中可以尝试）

创建元素

let svg = sd.svg();         // 获取svg画布
let rct = sd.Rect(svg);     // 在svg画布上创建一个Rect
let cir = sd.Circle(svg);   // 在svg画布上创建一个Circle
let txt = sd.Text(svg);     // 在svg画布上创建一个Text
let lne = sd.Line(svg);     // 在svg画布上创建一个Line
let pth = sd.Path(svg);     // 在svg画布上创建一个Path

拖拽

想要让元素可拖拽，只需要调用drag方法即可

let rct = sd.Rect(svg);     // 创建一个Rect
rct.drag(true);             // 最简单的可拖拽方法
rct.drag((e) => {           // 自定义拖拽方式
    rct.dx(e.dx);
    rct.dy(e.dy);
});
rct.drag({                  // 自定义拖拽方式，支持自定义拖拽开始，拖拽过程，拖拽结束的函数回调
    start: () => { console.log("start drag"); },
    drag: (e) => { rct.dx(e.dx).dy(e.dy); },
    end: () => { console.log("end drag"); }
});
rct.drag(false);            // 禁止拖拽（默认）

缩放

想让元素可缩放，只需要调用resizeable方法即可

let rct = sd.Rect(svg);
rct.resizeable(true);       // 允许缩放
rct.resizeable(false);      // 禁止缩放