Paper.js Đổi kích thước Raster/TextItem/Đường dẫn bằng cách kéo

Question

Tôi biết rằng tôi có thể scale đối tượng Raster trong Paper.js, cũng như TextItem và Path.

Tuy nhiên, tôi muốn thực hiện điều này khi kéo các đường chọn hoặc hộp giới hạn của Raster, TextItem hoặc Path, giống như khi bạn định lại kích thước hình ảnh trong chương trình như Word. Những giới hạn này tạo thành một đối tượng Rectangle. Tôi có thể sử dụng phương pháp fitBounds không? Hoặc rộng hơn, làm thế nào tôi có thể nắm bắt một sự kiện kéo chuột trên các dòng lựa chọn của một Raster, TextItem, hoặc đường dẫn? Tôi cho rằng một khi tôi có thể làm điều đó tôi có thể sử dụng phương pháp scale để tăng/thu nhỏ đối tượng.

Đây là Paper.js sketch để giúp bạn bắt đầu và thử nghiệm, mượn từ @Christoph. Xem thêm documentation cho Paper.js.

Answer 1

Xây dựng thực hiện thực tế sẽ khó chịu, nhưng đây là một 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 

Chỉ calc vị trí của khung hình và sau đó kéo đi :)