Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>A simple way would be to use canvas draws to draw 4 sided shapes.</p> <p>Consider each 4 corners. The "untouched" rectangle would be full size the touched rectangle would be smaller.</p> <p><img src="https://i.stack.imgur.com/yQJxu.png" alt="Touched and untouched boxes"></p> <p>You just need to draw your four sided shape using a point you calculate for each part of the rectangle. You can get the touch position, then figure out how much "weight" to give each point. </p> <p>to calculate each corner, you need to figure out how much "weight" to give the touched coordinate, and how much "weight" to give the untouched coordinate. If you touch the top left corner, that corner would use 100% of the touched coordinate, and the other three corners would all use the untouched coordinate.</p> <p><img src="https://i.stack.imgur.com/MxRo3.png" alt="touched top left corner"></p> <p>If you touched the top middle, you would get a shape like this:</p> <p><img src="https://i.stack.imgur.com/v6Pkk.png" alt="touched top middle"> </p> <p>We can calculate the corners for any touch spot, by calculating how far from the corner your touch is</p> <p><img src="https://i.stack.imgur.com/KnSBM.png" alt="touched bottom left"></p> <pre><code> float untouchedXWeight1 = Math.abs(xt - x1)/width; //maximum of 1, minimum of 0 float untouchedYWeight1 = Math.abs(yt - y1)/height; float untouchedWeight1 = (untouchedXWeight1 + untouchedYWeight1)/2; //also maximum of 1, minimum of 0 float touchedWeight1 = 1 - untouchedWeight1; </code></pre> <p>so with those weights, you can calculate your x and y positions for that corner:</p> <pre><code>x1 = xUntouched1 * untouchedWeight + xTouched1 * touchedWeight1; y1 = yUntouched1 * untouchedWeight + yTouched1 * touchedWeight1; </code></pre> <p>Then do similarly for the other 3 corners.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload