Question

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

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

我创建了绘图元素并按如下方式加载图像。

var drawing = SVG('drawing)

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

曾经尝试过各种方法，但似乎无法使其起作用。任何帮助，将不胜感激。谢谢

Answer 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]
        })

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

1 个答案: