Paper.js Resize Raster/TextItem/Pfad durch

Question

Ziehen Ich weiß, dass ich kann scale ein Raster Objekt in Paper.js sowie ein TextItem und ein Path.

Allerdings würde Ich mag, dies zu tun auf die Auswahlleitungen ziehen oder Begrenzungsrahmen eines Raster, TextItem oder Path, so wie man es, wenn in einem Programm wie Word Ändern der Bildgröße. Diese Grenzen bilden ein Objekt Rectangle. Kann ich hier einhaken, vielleicht mit der Methode fitBounds? Oder allgemeiner: Wie kann ich ein Mausereignis auf den Auswahllinien eines Rasters, Textelements oder Pfads erfassen? Ich nehme an, sobald ich das tun kann, kann ich die scale Methode verwenden, um das Objekt zu vergrößern/verkleinern.

Hier ist eine Paper.js sketch, um Sie zu starten und zum Experimentieren, geliehen von @Christoph. Siehe auch die documentation für Paper.js.

Answer 1

die tatsächliche Umsetzung Aufbau wäre störend empfunden werden, aber hier ist ein 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 

einfach die Position der Leinwand Calc und ziehen Sie dann weg :)