我知道我可以 scale一个Raster Paper.js 中的对象, 以及 TextItem和一个 Path .
但是,我想在拖动 Raster 的选择线或边界框时执行此操作, TextItem , 或 Path ,就像在 Word 等程序中调整图像大小时一样。这些边界形成一个 Rectangle目的。我可以 Hook 吗,也许使用 fitBounds
方法?或者更广泛地说,如何在 Raster、TextItem 或 Path 的选择线上捕获鼠标拖动事件?我想一旦我能做到这一点,我就可以使用 scale
方法来扩大/缩小对象。
这是一个 Paper.js sketch从@Christoph 借来帮助您入门和进行实验。另见 documentation对于 Paper.js。
最佳答案
构建实际的实现会很麻烦,但这里有一个 POC https://jsfiddle.net/f8h3j7v4/
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
只需计算 Canvas 的位置然后拖走:)
关于javascript - Paper.js 通过拖动调整光栅/TextItem/路径的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33112336/