使用 svg.js 将绘图边界设置为图像约束答案

【问题标题】：Set drawing boundaries to image constraints with svg.js使用 svg.js 将绘图边界设置为图像约束
【发布时间】：2018-10-11 17:10:40
【问题描述】：

我正在使用 svg.js 并将图像加载到 SVG.Doc 中。图像大小有时小于 SVG.Doc 元素。

如何在加载后将绘图大小限制为图像的边界，以便无法在图像之外进行绘制。

我创建绘图元素并加载图像，如下所示。

var drawing = SVG('drawing)

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

一直在尝试各种方法，但似乎无法使其发挥作用。任何帮助，将不胜感激。谢谢

【问题讨论】：

标签： javascript svg svg.js

【解决方案1】：

使用 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]
        })

【讨论】：