Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>How to scale down your group to fit on the stage even if the group is made wider</strong></p> <p>This illustration shows the starting “blue” group – not widened and not scaled.</p> <p><img src="https://i.stack.imgur.com/6JRXF.png" alt="enter image description here"></p> <p>This illustration shows the blue group after it has widened beyond the stage and scaled back.</p> <p><img src="https://i.stack.imgur.com/lRPHI.png" alt="enter image description here"></p> <p><strong>Here’s how to scale down your group without it “floating” left:</strong></p> <ul> <li>Undo any previous group offset (by the amount of any previous scaling factor).</li> <li>Calculate the new scaling factor (for example: scale down).</li> <li>Save the new scaling factor for use in any future scaling.</li> <li>Calculate the new group offset based on the new scaling factor.</li> <li>Set the group's offset to the newly scaled offset.</li> <li>Redraw the layer.</li> </ul> <p>You will need to add several properties to drawingGroup related to scaling:</p> <pre><code>// the current SCALED offset drawingGroup.offsetX=0; drawingGroup.offsetY=0; // the point from which all scaling will occur drawingGroup.scalePtX=0; drawingGroup.scalePtY=0; // the amount of current scaling applied to the group // ==1.00 is the beginning un-scaled group // &gt;1.00 scales the group larger // &lt;1.00 scales the group smaller drawingGroup.scaleFactor=1.00; </code></pre> <p>Then add this method to drawingGroup to actually do the scaling:</p> <pre><code>drawingGroup.scaleBy=function(scaleChange){ // undo previous offset this.offsetX += this.scalePtX/this.scaleFactor; this.offsetY += this.scalePtY/this.scaleFactor; // calc new scaling factor var newScaleFactor = this.scaleFactor*(1+scaleChange); // create new offset this.offsetX -= this.scalePtX/newScaleFactor; this.offsetY -= this.scalePtY/newScaleFactor; // set new scale factor this.scaleFactor=newScaleFactor; // do the new offset this.setOffset(this.offsetX,this.offsetY); // do the new scale this.setScale(this.scaleFactor); layer.draw(); }; </code></pre> <p>This is test code that both widens the group and auto-downscales it to fit the stage:</p> <p>This test code also recenters the group after downscaling.</p> <pre><code> // widen by 20px // if wider than stage, scale down by 15% $("#wider").click(function(){ drawingGroup.setWidth(drawingGroup.getWidth()+20); rect.setWidth(drawingGroup.getWidth()); var width=drawingGroup.getWidth()*drawingGroup.scaleFactor; if(drawingGroup.getX()+width&gt;stageWidth){ drawingGroup.scaleBy(-0.15); recenter(); } setStatus(); layer.draw(); }); function recenter(){ var w=drawingGroup.getWidth()*drawingGroup.scaleFactor; var h=drawingGroup.getHeight()*drawingGroup.scaleFactor; drawingGroup.setX(stage.getWidth()/2-w/2); drawingGroup.setY(stage.getHeight()/2-h/2); } </code></pre> <p>Note that setX()/setY() can be used normally for the group. </p> <p>Just be sure to calculate the <em>scaled</em> group width/height by multiplying by the scalingFactor.</p> <p>Here is complete code and a Fiddle: <a href="http://jsfiddle.net/m1erickson/UyDbW/" rel="nofollow noreferrer">http://jsfiddle.net/m1erickson/UyDbW/</a></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"&gt;&lt;/script&gt; &lt;style&gt; body{ padding:15px; } #container{ border:solid 1px #ccc; margin-top: 10px; width:300px; height:300px; } &lt;/style&gt; &lt;script&gt; $(function(){ var stage = new Kinetic.Stage({ container: 'container', width: 300, height: 300 }); var layer = new Kinetic.Layer(); stage.add(layer); // objects used in jquery events var drawingGroup; var rect,circle; var stageWidth=stage.getWidth(); var stageHeight=stage.getHeight(); drawingGroup=new Kinetic.Group({ x:stageWidth/2-50, y:stageHeight/2-50, width:100, height:100, }); drawingGroup.offsetX=0; drawingGroup.offsetY=0; drawingGroup.scalePtX=0; drawingGroup.scalePtY=0; drawingGroup.scaleFactor=1.00; drawingGroup.scaleBy=function(scaleChange){ // undo previous offset this.offsetX += this.scalePtX/this.scaleFactor; this.offsetY += this.scalePtY/this.scaleFactor; // calc new scaling factor var newScaleFactor = this.scaleFactor*(1+scaleChange); // create new offset this.offsetX -= this.scalePtX/newScaleFactor; this.offsetY -= this.scalePtY/newScaleFactor; // set new scale factor this.scaleFactor=newScaleFactor; // do the new offset this.setOffset(this.offsetX,this.offsetY); // do the new scale this.setScale(this.scaleFactor); layer.draw(); }; layer.add(drawingGroup); var rect=new Kinetic.Rect({ x:0, y:0, width:100, height:100, stroke:"lightgray", fill:"skyblue" }); drawingGroup.add(rect); var circle=new Kinetic.Circle({ x:50, y:50, radius:20, fill:"blue" }); drawingGroup.add(circle); var status=new Kinetic.Text({ x:15, y:15, text:"width=100, scale=1.00", fontSize:18, fill:"red" }); layer.add(status); setStatus(); layer.draw(); function setStatus(){ var width=drawingGroup.getWidth(); var scale=Math.round(drawingGroup.scaleFactor*100); status.setText("Width: "+width+", Scale: "+scale+"%"); } // widen by 20px // if wider than stage, scale down by 15% $("#wider").click(function(){ drawingGroup.setWidth(drawingGroup.getWidth()+20); rect.setWidth(drawingGroup.getWidth()); var width=drawingGroup.getWidth()*drawingGroup.scaleFactor; if(drawingGroup.getX()+width&gt;stageWidth){ drawingGroup.scaleBy(-0.15); recenter(); } setStatus(); layer.draw(); }); function recenter(){ var w=drawingGroup.getWidth()*drawingGroup.scaleFactor; var h=drawingGroup.getHeight()*drawingGroup.scaleFactor; drawingGroup.setX(stage.getWidth()/2-w/2); drawingGroup.setY(stage.getHeight()/2-h/2); } }); // end $(function(){}); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Blue group will scale if extending past stage&lt;/p&gt; &lt;button id="wider"&gt;Wider&lt;/button&gt; &lt;div id="container"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POScale and move drawing using KineticJs
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USmarkE
    1. USmarkE
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POScale and move drawing using KineticJs
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COThat's close to what I am looking for. The difference is that each time that the length of the drawing group expands I am trying to recentre the image inside the layer when it is redrawn. Do you know a good way to do this?
      singulars
      1. PO
      1. USTom
    2. COI edited my answer to recenter the group after it has been down-scaled. Note that you can use setX/setY normally on the group. However, getWidth/getHeight will report unscaled values so you must multiply that width/height by drawingGroup's scaleFactor to get the scaled sizes.
      singulars
      1. PO
      1. USmarkE
    3. COI have an update to this question. What I would like to do is to adjust the length of the drawing and to rescale the drawing with each increment. I would like to have the drawing centred on the y-axis but the drawing should be set to 20px from the left side of the stage. I haven't been able to get the scaling working correctly when using increment/decrement. Is there a way to get this working?
      singulars
      1. PO
      1. USTom
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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