Svg.js на основе графика для достижения сопротивления, выбора и редактирования операций

В этой статье, как использовать записи svg.jsдля достижения перетаскивания, выбора, рендеринга изображений и рисования операций всех типов графических форм.

1. О SVG

SVGЯвляется ли может быть сгенерирована масштабируемая векторная графика, используя изображение определения формата XML , соответствующие DOM - узел, один графические облегчают межсетевой обмен . Чем CANVASболее гибким.

2, SVG.js

Сегодняшний герой должен сказать SVG.js, что сам по себе является пакет библиотеки предложений SVG различной API делает использование SVG более удобным для эквивалента JQuery JS, это само введение является легким, быстрым и легким в более читаемость . 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);
    });
}

Объяснение кода:

1. image(url) : Рисовать на SVG
2. loaded((loader)=>{}): Изображения загрузки обратного вызова событие после успеха loaderинформации возвращает параметр об изображении, в том числе ширина, высота, ссылки
3. group()Нарисуйте графическую комбинацию
4. panZoom(): Нужно ввести svg.pan-zoom.js пробки (НАЯ установка svg.pan-zoom.js - сохранить -dev), чтобы достичь шаблона опрокидывания масштабирования
   • transform()Обеспечивает графическое положение масштабирования и перемещения
   • setPosition(x, y, scale): X, Y представляет собой положение, масштаб представляет собой масштабирование
5. 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);
}

1. front() : То, что предыдущее шоу установлено в комбинации
2. 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) {
    ...
});

1. Графическое сопротивление: необходимо ввести svg.draggable.js пробки ( npm install svg.draggable.js -- save-dev), осознайте бугельный график
   • draggable(boolean): Поддержка перетаскивания, когда booleanэто falseвремя запрета сопротивления;
   • dragend(): Событие после перетаскивания
2. Выбор шаблона: Непременный svg.select.js плагин ( npm install svg.select.js -- save-dev), реализовать выбор графики и масштаб операций
   • selectize(): Графический стать выбран
   • resize(param): Графика может изменить масштаб изображения, когда параметр paramявляется stopвремя, увеличить запрет
   • resizedone(): Операция масштабирования после шаблона