Voici une solution simple qui devrait vous aider à démarrer. Il ne gère pas la rotation car je ne suis pas sûr de la façon dont vous envisagez le fonctionnement de l'interface utilisateur, mais en modifiant la zone de délimitation pour redimensionner le rectangle, vous devriez pouvoir le faire pivoter sans problème.
paperjs sketch
j'ai décidé de faire mon propre interface utilisateur et aller de l'avant et rendre l'exemple plus compliqué à traiter autant de vous la question que je peux sans plus d'informations. Voici la nouvelle esquisse:
new sketch
L'interface utilisateur est
- cliquez dans le rectangle pour le déplacer en faisant glisser
- cliquez sur un coin et faites glisser pour redimensionner
- contrôle-cliquez sur un coin pour le faire pivoter
Il est un peu difficile de cliquer sur les coins, mais c'est un exercice laissé au lecteur. Ils sont des cercles de couleur juste pour souligner où se trouve chaque point de segment du Path.
Points clés du code:
Utilisez les limites du rectangle à l'échelle. Path.Rectangle n'est pas un rectangle en ce qui concerne le papier. Il s'agit de quatre courbes (qui sont droites) reliant quatre points de segment. Lorsque vous devez travailler avec un rectangle pour obtenir son centre, en haut à gauche, etc., vous avez besoin d'un Rectangle. Mettre à l'échelle le rectangle visible en utilisant les limites du rectangle (Path.Rectangle.bounds). Le code illustre les limites avec un rectangle d'aqua supplémentaire afin qu'il soit visible (il est plus facile à voir lors de la rotation).
onMouseDown() définit l'état pour onMouseDrag() et configure les données nécessaires pour chaque état, par exemple, l'enregistrement de la base d'échelle pour le redimensionnement.
onMouseDrag() implémente le déplacement, le redimensionnement et la rotation.
tool.onMouseDrag = function(e) { if (rect.data.state === 'moving') { rect.position = rect.position + e.point - e.lastPoint; adjustRect(rect); } else if (rect.data.state === 'resizing') { // scale by distance from down point var bounds = rect.data.bounds; var scale = e.point.subtract(bounds.center).length/ rect.data.scaleBase.length; var tlVec = bounds.topLeft.subtract(bounds.center).multiply(scale); var brVec = bounds.bottomRight.subtract(bounds.center).multiply(scale); var newBounds = new Rectangle(tlVec + bounds.center, brVec + bounds.center);
rect.bounds = newBounds;
adjustRect(rect); } else if (rect.data.state === 'rotating') { // rotate by difference of angles, relative to center, of // the last two points. var center = rect.bounds.center; var baseVec = center - e.lastPoint; var nowVec = center - e.point; var angle = nowVec.angle - baseVec.angle; rect.rotate(angle); adjustRect(rect); } }
Le déménagement est assez facile - calculer juste la différence entre les points actuels et le dernier de l'événement et changer la position du rectangle par beaucoup.
Le redimensionnement n'est pas aussi évident.La stratégie consiste à ajuster les limites x et y en fonction de la distance d'origine (scaleBase.length) entre le point mousedown et le centre du rectangle. Notez que si paper-full.js permet d'utiliser des opérateurs ("+", "-", "*", "/") avec des points, j'ai utilisé les méthodes subtract() et multiply() à plusieurs reprises - je trouve naturel de chaîner calculs de cette façon. La rotation utilise le très bon concept de papier qu'un point définit également un vecteur et qu'un vecteur a un angle. Il suffit de noter la différence dans les angles entre l'événement lastPoint et point par rapport au centre du rectangle et fait pivoter le rectangle par cette différence.
moveCircles() et adjustRect() sont simplement des fonctions de comptabilité pour mettre à jour les cercles de coin et le rectangle d'aqua.