Drag-N-Drop Image Resizing

[whitman]

Currently, image resizing is achieved via text fields. We'd like to keep this method of resizing but also include drag-n-drop resizing with edges/corners being the control areas.

A & E

• East-to-west scaling only
• CSS cursor when hovering: ew-resize

C & G

• North-to-south scaling only
• CSS cursor when hovering: ns-resize

B, D, F & H

• Each point should behave as correlating control points in the example provided below, in terms of resizing
• Holding shift while resizing should make it so the scaling is proportionate

K & I

• Drag to scale north-to-south and vice versa

L & J

• Drag to scale east-to-west and vice versa

For reference: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

Features

• The text area for scaling in the sprite context menu should be split into two text fields, one for height and one for width. The value in the text area should be a percentage in * the form of whole number percentages, such as: 100%, 90%, 80%, etc.
• drag lines to resize
• drag control boxes to scale
• image should have min scale size (maybe 20x20)
• corner control boxes can be used to scale west-to-east or north-to-south.
• selected sprite should have control points/borders for scaling
• Solid line box should be drawn around the images in context

  Cursors

A. ew-resize B. nwse-resize C. ns-resize D. nesw-resize E. ew-resize F. nwse-resize G. ns-resize H. nesw-resize

[whitman]

Updated the spec a bit @dira

[dira]

@whitman something else besides cursors?

[dira]

@whitman We need to change the structure of the json to accomodate different vertical/horizontal scaling. Right now it is

"CCScaleTo": [
      {
        "intensity": 1.1,
        "duration": 3,
        "actionTag": 22
      }
    ],

I propose

"CCScaleTo": [
      {
        "horizontal": 1.1,
        "vertical": 2.2,
        "duration": 3,
        "actionTag": 4
      }
    ],

[whitman]

Opened https://github.com/curiousminds/interapptive/issues/269 for this. We should be sure that the JSON has been updated in mobile before deploying/merging this

[whitman]

@dira I think we should use scaleX and scaleY instead of horizontal and vertical in the JSON since Cocos2d-x API uses scaleX (sx)and scaleY (sy) as the parameter names: http://www.cocos2d-x.org/reference/native-cpp/V3.0alpha0/d6/d06/classcocos2d_1_1_scale_to.html

Is that okay?

[dira]

@whitman

"CCScaleTo": [
  {
    "sx": 1.1,
    "sy": 2.2,
    "duration": 3,
    "actionTag": 4
  }
],

[whitman]

@dira Just the cursors and added expected behavior for the rest of the reference points (I, J, K, L). Please let me know if there should be more detail in some area and I'll try to be more precise/descriptive.

[whitman]

sx and sy sound good to me. Will proceed accordingly.

[dira]

The home button and the main menu buttons have an entry such as:

scale: {
  sx: 50
  sy: 200
}

As for the actions, they have the above structure:

"CCScaleTo": [
  {
    "sx": 110,
    "sy": 220,
    "duration": 3,
    "actionTag": 4
  }
]

sx and sy are positive integers, and signify the percentage to which the image is scaled to.

[whitman]

:thumbsup: