首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Paper.js通过拖动调整栅格/文本项/路径的大小

Paper.js通过拖动调整栅格/文本项/路径的大小
EN

Stack Overflow用户
提问于 2015-10-14 04:48:04
回答 1查看 1.4K关注 0票数 16

我知道我可以在Paper.jsscale一个Raster对象,以及一个TextItem和一个Path

但是,我想在拖动RasterTextItemPath的选择线或边界框时执行此操作,就像在Word等程序中调整图像大小时所做的那样。这些边界形成了一个Rectangle对象。我可以挂接到这里吗,也许使用fitBounds方法?或者更广泛地说,如何在栅格、TextItem或路径的选择线上捕获鼠标拖动事件?我想一旦我能做到这一点,我就可以使用scale方法来增大/缩小对象。

这是一个从@Christoph借来的Paper.js sketch,可以帮助你入门并进行实验。另请参阅Paper.js的documentation

EN

回答 1

Stack Overflow用户

发布于 2015-10-23 07:00:06

构建实际的实现可能会很麻烦,但这里有一个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

只需计算画布的位置,然后拖动即可:)

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33112336

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档