Svg.jsベースのドラッグを達成するために、グラフィックス、選択と編集操作

録音を使用するには、どのようにこの論文では、svg.jsドラッグ＆ドロップ、選択、画像のレンダリングやグラフィック図形のすべての種類の描画操作を実現します。

SVGについて1。

SVGXMLフォーマット定義の画像を用いて、スケーラブルベクターグラフィック、生成することが可能であるDOMノードに対応する、単一のグラフィックインターワーキング促進します。よりCANVAS、より柔軟な。

2、SVG.js

今日の主人公は言うことですSVG.js、それはSVGライブラリー提供のパッケージ自体であるAPIの様々なjQueryのJSの同等のためのSVGの使用がより便利になり、それの自己紹介があり、高速、かつ簡単により、軽量読みやすさ。SVG.js公式ウェブサイトは非常に詳細に説明するが、ここではいくつかの簡単な概要です。

2.1初期化

<div id="svgDemo"></div>

this.draw = SVG("svgDemo").size("100%", "100%");

SVG(domId)ドムノードの初期化。回しsvg要素
size()パラメータはピクセルであってもよい、請求svg.jsアートボードのサイズを変更するための方法であって、size('100px', '100px');、またはパーセンテージとしてsize('100%', '100%');

2.2いくつかの基本的な形状

示すように、我々は非常に迅速にいくつかの基本的なグラフィックスを描画することができます。APIは、特定のコードブロックに対応する参照してください。

// 画线
let line = this.draw
.line(10, 10, 10, 150) // 起点xy，终点xy
.stroke({ width: 5, linecap: "round", color: "blue" }); // 线条样式

// 画矩形
let rect = this.draw
.rect(100, 100) // 宽高
.radius(10) // 圆角
.fill("red") //填充
.move(20, 20); // 位移

// 画圆
let circle = this.draw
.circle(100) // 圆直径
.fill("green") 
.move(130, 20);

// 画椭圆
let ellipse = this.draw
.ellipse(150, 100) // 宽直径，高直径
.move(240, 20)
.fill("pink");

// 折线
let polyline = this.draw
.polyline('450, 10, 400, 100, 500, 100') // 点的位置，也可以使用数组替换[[450,10],[400,100],[500,100]]
.fill("#f06")
.stroke({ width: 1, color: "black" });

// 多边形
let polygon = this.draw.polygon([[550,10],[600,10],[630,50],[600,100],[550,100],[520,50]]) // 点的位置
.fill("#71f5ea")
.stroke({ width: 1 });

3、効果を達成するために

使用するのは簡単に説明し、今使用する方法について説明svg.jsし、プラグイン、画像のラベルオペレーション実現の対応する番号を展開します。結果は以下のように、我々は、ズームすることができる画像であり、ドラッグ操作、異なるパターンが画像上に描画することができます。マウスを画像の上に置かれたとき、ガイドがあるでしょう。（ネットワークからの映像）

ズームアウトの効果
写真は、効果をズーム
写真のドラッグ効果
絵の上にグラフィックスを描画

3.1レンダリング画像

ここだけのカーネルコードに次のコードを貼り付け、について話をします。そして、直接結果を達成するためにコピー＆ペーストすることはできません。

{
    //...省略代码
    let that = this;
    this.mainImage = this.draw
    .image(imgurl)
    .loaded(function(loader) {
        // 图片加载后，设置图片大小
        this.size(loader.width, loader.height);

        // 绘制一个图形组合，之后的图形都在这个组合上操作
        that.drawGroup = that.draw.group();

        // 给图形组合加边框
        let borderRect = that.drawGroup
        .rect(loader.width, loader.height)
        .stroke(DeomSet.imageBorder) // DeomSet下都是一些配置项，这里不再罗列。
        .fill("none");

        // 给图形组合加辅助线，只有鼠标移入地时候才显示，先绘制dom
        that.lineX = that.drawGroup.line(0, 0, 0, 0).stroke(DeomSet.imageLine);
        that.lineY = that.drawGroup.line(0, 0, 0, 0).stroke(DeomSet.imageLine);

        // 将图像也放入组合中
        that.drawGroup.add(this).attr(DeomSet.groupId);

        // 使图像组合可以放大缩小
        that.groupZoom = that.drawGroup.panZoom(DeomSet.zoomOpt);

        // 鼠标移动事件
        that.drawGroup.on("mousemove", that.mousemoveEvt, that);

        // 鼠标移出事件
        that.drawGroup.on("mouseleave", that.mouseleaveEvt, that);

        // 鼠标点下
        that.drawGroup.on("mousedown", that.mousedownEvt, that);

        // 鼠标松开
        that.drawGroup.on("mouseup", that.mouseupEvt, that);
    });
}

コードの説明：

image(url) ：SVGに絵を描きます
loaded((loader)=>{})：画像が成功した後、コールバックイベントをロードしloader、幅、高さ、リンクなど、画像に関するパラメータ情報を返します
group()：グラフィックの組み合わせを描きます
panZoom()：導入する必要がありsvg.pan-zoom.jsプラグ（svg.pan-zoom.jsをインストールNPM -保存 -dev）、ロールオーバーズームパターンを達成するために
- transform()：グラフィカルなズーム位置や動きを提供します
- setPosition(x, y, scale)：X、Y位置を表し、スケールは、スケーリングを表します
on(eventname,event,context)イベントバインディングeventname：イベント名event：イベントcontext：コンテキスト

3.2描画命令基準線

グラフィックスを描画するので、より便利な基準線のプロンプトが表示されます画像の上にマウスを移動させます。

{       
    //...省略代码
    // mousemove事件
    // getPointer()这是获取点的位置的方法，不是API
    let { zx, zy } = this.getPointer(e);
    // 获取图片的宽高
    let w = this.mainImage.width();
    let h = this.mainImage.height();
    // 画线
    this.lineX.front().plot(0, zy + 1, w, zy + 1);
    this.lineY.front().plot(zx + 1, 0, zx + 1, h);
}

front() ：前のショーはに組み合わせて設定することを
plot()：グラフィックス移動ドロー

3.3ドローグラフィック

/**
 * 绘制移动的矩形
 */
//...省略代码
let currentDraw = this.currentDraw;
if (!currentDraw) {
    this.currentDraw = this.drawGroup
    .rect(0, 0)
    .move(x, y) // 这里的xy表示矩形的位置
    .fill(OcrSet.rect)
    .stroke(OcrSet.rectStroke)
    .attr({ id: id });
} else {
    let width = Math.abs(zx - x),
    height = Math.abs(zy - y),
    mx = Math.min(zx, x),
    my = Math.min(zy, y); // zx,zy表示移动的鼠标的位置
    this.currentDraw.size(width, height).move(mx, my);
}

/**
 * 绘制多边形-过程
 */
//...省略代码 
let currentDraw = this.currentDraw;
if (!currentDraw) {
    points.push([zx, zy]); // points表示当前多边形的点
    this.currentDraw = this.drawGroup
    .polygon(points)
    .fill(OcrSet.polygo)
    .stroke(OcrSet.rectStroke)
    .attr({ id: id });
} else {
    points = this.currentDraw.array().value.slice(0);
    points.push([zx, zy]);
    this.currentDraw.plot(points);
}

array()：あなたは、ポイント情報のポリゴンに取得することができます

3.4グラフィカルなドラッグアンドドロップ選択したイベント


// 图形可拖拽
this.selectShape.draggable();

// 图形禁止拖拽
this.selectShape.draggable(false);

// 图形选中并可放大缩小
this.selectShape.selectize(OcrSet.selectOpt).resize();

// 图形去除选中并禁止放大缩小
this.selectShape.selectize(false, { deepSelect: true }).resize("stop");


// 图形位置修改后的事件
this.selectShape.on("resizedone", function() {
  ...
});

// 图形拖拽后的事件
this.selectShape.off("dragend").on("dragend", function(e) {
    ...
});

グラフィカルなドラッグ：導入する必要svg.draggable.jsプラグは（npm install svg.draggable.js -- save-dev）、ドラッググラフィックスを実現します
- draggable(boolean)：支持体ドラッグアンドドロップ、booleanあるfalseドラッグを禁止する時間は、
- dragend()：ドラッグ後のイベント
パターン選択：不可欠svg.select.jsのプラグ（npm install svg.select.js -- save-dev）、グラフィックの選択を実現し、操作してズームします。
- selectize()：グラフィックは、選択になります
- resize(param)：グラフィックスは、パラメータがとき、ズームすることができparamているstop時、禁止をズーム
- resizedone()：パターンの後にズーム操作