Paper.js调整大小光栅/ TextItem /拖动

路径我知道，我可以scale一个Raster对象Paper.js，以及一个TextItem和Path。但是，我想要在拖动Raster，TextItem或Path的选择线或边界框时执行此操作，就像在Word等程序中调整图像大小时一样。这些边界形成一个Rectangle对象。我可以挂接到这一点，也许使用fitBounds方法？或者更广泛地说，我怎么能捕捉栅格，TextItem，或路径的选择线鼠标拖动事件？我想一旦我能做到这一点我可以使用scale方法来放大/缩小的对象。Paper.js调整大小光栅/ TextItem /拖动

这里有一个Paper.js sketch让你开始和实验，从@Christoph借来的。请参阅Paper.js的documentation。

来源

2015-10-13 Scott H

也许这会帮助你的http： //stackoverflow.com/a/26788306/826625（包括效果图） – mstoppert

我不熟悉的技术，但是你能不能calc下的区域？例如...可拖动的区域应该是宽度：0;宽度：currentWidth，高度相同。所有你必须知道的是图像开始的地方，这是矩形对象的x和y。 –

建设的实际实施将是麻烦，但这里是一个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

只是calc下画布的位置，然后拖走:)

来源

2015-10-22 23:00:06

这里选择的数字如何？ –

退房小提琴，从理论上讲，你应该自己calc下的数字（这是实现部分，最难的部分是计算旋转，但我认为这是一个FUNC为） –

Paper.js调整大小光栅/ TextItem /拖动

回答

相关问题