Giter VIP home page Giter VIP logo

Comments (11)

jonobr1 avatar jonobr1 commented on May 12, 2024

I haven't had the chance to look at this properly yet, but looking from your source code I could see one issue that arises. Unfortunately at the moment two.js does not support compound paths. This will trigger unexpected results. If you're using Adobe Illustrator you can select that shape and Expand or Release Path on the object to fix this.

from two.js.

davidhuser avatar davidhuser commented on May 12, 2024

Thank you, this was the point. I forgot to include jQuery, too.
Here my code which works in an index.html:

<!doctype html>
<html>
  <head>
    <script src="two.min.js"></script>
    <script src="jquery-1.9.1.min.js"></script>
  </head>
  <body>
        <div id="assets" style="display:none;">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="1133.858px" height="1133.858px" viewBox="0 0 1133.858 1133.858" enable-background="new 0 0 1133.858 1133.858"
     xml:space="preserve">
<g>
    <polygon fill="#000" points="523.657,638.026 523.647,638.026 480.751,595.034 440.022,594.991 440.007,608.118 452.275,620.411 
        470.755,620.433 498.238,647.974 498.217,666.566 510.487,678.861 523.612,678.877 523.658,638.057 523.667,638.045 
        523.658,638.035"/>
    <polygon fill="#000" points="497.774,560.167 499.397,561.793 525.975,588.433 535.102,579.33 535.122,561.891 508.062,534.768 
        467.334,534.726 467.32,547.854 479.587,560.148"/>
    <polygon fill="#000" points="557,583.814 539.559,583.796 530.436,592.901 557.011,619.538 558.639,621.167 558.619,639.355 570.887,651.649 
        584.012,651.663 584.057,610.938"/>
    <polygon fill="#000" points="494.454,564.954 453.726,564.908 453.711,578.035 465.981,590.328 484.166,590.348 528.26,634.543 
        528.239,652.724 540.508,665.02 553.636,665.034 553.68,624.303 553.674,624.302"/>
</g>
</svg>
        </div>
    <div class="scripts">
        <script>
          var two = new Two({
            fullscreen: true,
            autostart: true
          }).appendTo(document.body);

          var el = $('#assets svg')[0];
          var shape = two.interpret(el).center();

          two.bind('update', function() {
            shape.rotation -= 0.001;
          }).play();
        </script>
    </div>
  </body>
</html>

But the rotating shape doesn't appear in the surrounding <div> (if I place it in it). How to position if it's not directly possible with CSS? If I position the div anywhere, the whole site gets unscrollable.

from two.js.

jonobr1 avatar jonobr1 commented on May 12, 2024

Do you mind throwing this up on jsfiddle, dropbox, or a personal server so I can see it? It's hard to help out when it's just text. Thanks!

from two.js.

davidhuser avatar davidhuser commented on May 12, 2024

Sorry, sure! here it is.
Thank you...

from two.js.

jonobr1 avatar jonobr1 commented on May 12, 2024

Ah, this is really nice! All you should need to do is disable fullscreen. Ala:

var two = new Two({ fullscreen: false, autostart: true });

Or disregard that attribute all together. It defaults to false.

from two.js.

jonobr1 avatar jonobr1 commented on May 12, 2024

You will also need to specify the desired width and height, which looks to be 136 x 136. So you'd do:

var two = new Two({
  width: 136,
  height: 136,
  autostart: true
}).appendTo(document.body);

Hope that helps!

from two.js.

davidhuser avatar davidhuser commented on May 12, 2024

Great, thank you! Could you tell me how to define its position? I looked at your example "Adding Motion", but couldn't figure it out. I placed it in a div like you.
Your support is highly appreciated, thanks!

from two.js.

jonobr1 avatar jonobr1 commented on May 12, 2024

All Two.Groups or Two.Polygons have a translation property which is a
Two.Vector. Change it's x or y property to move the shape.

On Sunday, June 16, 2013, David Huser wrote:

Great, thank you! Could you tell me how to define its position? I looked
at your example "Adding Motion"http://jonobr1.github.io/two.js/#basic-usage,
but couldn't figure it out. I placed it in a div like you.
Your support is highly appreciated, thanks!

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/32#issuecomment-19515812
.

http://jonobr1.com/
[email protected]

from two.js.

davidhuser avatar davidhuser commented on May 12, 2024

Ok, got this. I'm sorry for still bothering you, but my spinning logo is being overlapped by the wrapping <div id="wrap">. I tried to bypass this with z-index...

from two.js.

jonobr1 avatar jonobr1 commented on May 12, 2024

I think you can solve this by setting the translation of the shape to the center of the two's stage:

// instead of shape.translation.y = 20;
shape.translation.y = two.height / 2;

from two.js.

davidhuser avatar davidhuser commented on May 12, 2024

Nice. I appended it to another div. Here is the final code for science and other desperate minds.. Thank you for your support!

<div id="spinthatshit">
    <div class="two-container">
        <div id="assets" style="display:none;">
            <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 width="120px" height="120px" style="visibility:visible;" viewBox="0 0 120 120" enable-background="new 0 0 120 120" xml:space="preserve">
                <g>
                    <polygon fill="#FFF" points="78.261,80.486 78.254,80.486 50.109,52.28 23.387,52.251 23.377,60.864 31.426,68.93 43.551,68.943 61.583,87.014 
                             61.569,99.213 69.62,107.279 78.23,107.289 78.262,80.508 78.267,80.5 78.262,80.492  "/>
                    <polygon fill="#FFF" points="61.278,29.403 62.344,30.47 79.781,47.948 85.77,41.976 85.782,30.534 68.028,12.738 41.307,12.71 41.298,21.324 
                             49.347,29.39   "/>
                    <polygon fill="#FFF" points="100.138,44.918 88.694,44.906 82.708,50.88 100.146,68.357 101.213,69.426 101.2,81.359 109.249,89.426 
                             117.86,89.434 117.89,62.713    "/>
                    <polygon fill="#FFF" points="59.101,32.543 32.378,32.513 32.369,41.126 40.419,49.192 52.35,49.205 81.28,78.201 81.268,90.131 89.316,98.197 
                             97.931,98.207 97.959,71.482 97.955,71.482  "/>
                </g>
            </svg>
        </div>
        <div class="scripts">
            <script src="two.min.js"></script>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
            <script>
                var element =document.getElementById("spinthatshit"),
                two = new Two({
                    autostart: true,
                    width: 1024,
                    height: 120
                });
                two.appendTo(element);

                var el = $('#assets svg')[0];
                var shape = two.interpret(el).center();

                shape.translation.set(two.width / 2, two.height / 2);

                two.bind('update', function() {
                    shape.rotation -=0.005;
                }).play();
            </script>
        </div>
    </div>
</div>

from two.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.