Установите границы рисования для ограничений изображения с помощью svg.js - PullRequest
Новая
       47

Установите границы рисования для ограничений изображения с помощью svg.js

0 голосов
/ 11 октября 2018

Я использую svg.js и загружаю изображение в SVG.Doc.Размер изображения иногда меньше, чем элемент SVG.Doc.

Как можно ограничить размер рисунка границами изображения после загрузки, чтобы было невозможно рисовать вне изображения.

Я создаю элемент чертежа и загружаю изображение, как показано ниже.

var drawing = SVG('drawing)

drawing.image('./url).loaded(function(loader) {
     drawing.size(loader.width, loader.height)
})

Пробовал различные методы, но не могу заставить его работать.Любая помощь будет оценена.Спасибо

1 Ответ

0 голосов
/ 12 октября 2018

Используя перетаскиваемый плагин SVG, https://github.com/svgdotjs/svg.draggable.js. При рисовании элемента используйте параметры ограничений при запуске метода перетаскивания на новом элементе к границам изображения.

var element = rect(200,200)
        .style({
          'fill-opacity': 0,
        })
        .selectize({
          rotationPoint: false
        })
        .resize()
        .draggable({
          minX: 0,
          minY: 0, 
          maxX: self.imageSize[0], 
          maxY: self.imageSize[1]
        })
...