-1

I'm using svg.js and I'm loading an image into a SVG.Doc. The image size is sometimes smaller than the SVG.Doc element.

How can I limit the drawing size to the bounds of the image once loaded so that it is not possible to draw outside of the image.

I create the drawing element and load the image as below. 

var drawing = SVG('drawing)

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

Been trying various methods but can't seem to get it to work. Any help would be appreciated. Thanks

cbarlow123
  • 217
  • 5
  • 18

1 Answers1

0

Using the SVG draggable plugin, https://github.com/svgdotjs/svg.draggable.js. When drawing an element, use the constraints options when initiating the draggable method on the new element to the boundaries of the image. 

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]
        })
cbarlow123
  • 217
  • 5
  • 18