Paper.js通过拖动调整栅格/文本项/路径?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (44)

我知道我可以在Paper.js中扩展一个Raster对象,以及一个TextItem和一个Path。

但是,我想要在拖动栅格,文本项或路径的选择线或边界框时执行此操作,就像调整像Word一样的程序中的图像一样。这些边界形成一个Rectangle对象。我可以用这个fitBounds方法来勾住它吗?或者更广泛地说,如何在Raster,TextItem或Path的选择线上捕获鼠标拖动事件?我想,一旦我能做到这一点,我可以使用该scale方法来增长/收缩对象。

提问于
用户回答回答于
c.addEventListener('mousedown',function(e){//c = context, check the fiddle
//Calculate the position of the edges, currently hardcoded values for fiddle
//For example getPosition(c).y + y * scaleY
//I should mention that rotate starts at the top left corner; 
//the whole canvas gets rotated(+transform exists)
//There is actually a pretty clever way to handle rotation;
//rotate the mouse position
if(e.clientY > 15 && e.clientY < 25)
    dragNorth = true
else
    dragNorth = false
if(e.clientX > 15 && e.clientX < 25)
    dragWest = true
else
    dragWest = false
if(e.clientX > 165 && e.clientX < 175)
    dragEast = true
else
    dragEast = false
if(e.clientY > 165 && e.clientY < 175)
    dragSouth = true
else
    dragSouth = false
})

function getPosition(element) {
var xPosition = 0;
var yPosition = 0;

while(element) {
    xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
    yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
    element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
//Thanks to  
//http://www.kirupa.com/html5/get_element_position_using_javascript.htm

所属标签

可能回答问题的人

  • 应用案例分享

    1 粉丝490 提问5 回答
  • uncle_light

    5 粉丝518 提问4 回答
  • o o

    4 粉丝495 提问4 回答
  • 学生

    8 粉丝476 提问3 回答

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动