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 /拖動

回答

相關問題