0

我在我的网站背景中包含了一个 paperjs 示例（http://paperjs.org/examples/meta-balls/）。这很好用：

<script> // METABALLS: </script>
<script type="text/javascript" src="tl_files/paperjs-nightly/lib/paper.js"></script>
    <script type="text/paperscript" canvas="canvas">
        // Ported from original Metaball script by SATO Hiroyuki
        // http://park12.wakwak.com/~shp/lc/et/en_aics_script.html

        project.currentStyle = {
            fillColor: '#EEEEEE'
        };

        var ballPositions = [[235, 129], [610, 73], [486, 363],
            [117, 459], [484, 726], [843, 306], [789, 615], [1049, 73],
            [1292, 428], [1117, 733], [1352, 120], [92, 798], [1650, 159], [1790, 479], [1650, 879]];

        var handle_len_rate = 2.4;
        var circlePaths = [];
        var radius = 50;
        for (var i = 0, l = ballPositions.length; i < l; i++) {
            var circlePath = new Path.Circle({
                center: ballPositions[i],
                radius: 50
            });
            circlePaths.push(circlePath);
        }

        var largeCircle = new Path.Circle({
            center: [676, 433],
            radius: 100
        });
        circlePaths.push(largeCircle);

        function onMouseMove(event) {
            largeCircle.position = event.point;
            generateConnections(circlePaths);
        }

        var connections = new Group();
        function generateConnections(paths) {
            // Remove the last connection paths:
            connections.children = [];

            for (var i = 0, l = paths.length; i < l; i++) {
                for (var j = i - 1; j >= 0; j--) {
                    var path = metaball(paths[i], paths[j], 0.5, handle_len_rate, 300);
                    if (path) {
                        connections.appendTop(path);
                        path.removeOnMove();
                    }
                }
            }
        }

        generateConnections(circlePaths);

        // ---------------------------------------------
        function metaball(ball1, ball2, v, handle_len_rate, maxDistance) {
            var center1 = ball1.position;
            var center2 = ball2.position;
            var radius1 = ball1.bounds.width / 2;
            var radius2 = ball2.bounds.width / 2;
            var pi2 = Math.PI / 2;
            var d = center1.getDistance(center2);
            var u1, u2;

            if (radius1 == 0 || radius2 == 0)
                return;

            if (d > maxDistance || d <= Math.abs(radius1 - radius2)) {
                return;
            } else if (d < radius1 + radius2) { // case circles are overlapping
                u1 = Math.acos((radius1 * radius1 + d * d - radius2 * radius2) /
                        (2 * radius1 * d));
                u2 = Math.acos((radius2 * radius2 + d * d - radius1 * radius1) /
                        (2 * radius2 * d));
            } else {
                u1 = 0;
                u2 = 0;
            }

            var angle1 = (center2 - center1).getAngleInRadians();
            var angle2 = Math.acos((radius1 - radius2) / d);
            var angle1a = angle1 + u1 + (angle2 - u1) * v;
            var angle1b = angle1 - u1 - (angle2 - u1) * v;
            var angle2a = angle1 + Math.PI - u2 - (Math.PI - u2 - angle2) * v;
            var angle2b = angle1 - Math.PI + u2 + (Math.PI - u2 - angle2) * v;
            var p1a = center1 + getVector(angle1a, radius1);
            var p1b = center1 + getVector(angle1b, radius1);
            var p2a = center2 + getVector(angle2a, radius2);
            var p2b = center2 + getVector(angle2b, radius2);

            // define handle length by the distance between
            // both ends of the curve to draw
            var totalRadius = (radius1 + radius2);
            var d2 = Math.min(v * handle_len_rate, (p1a - p2a).length / totalRadius);

            // case circles are overlapping:
            d2 *= Math.min(1, d * 2 / (radius1 + radius2));

            radius1 *= d2;
            radius2 *= d2;

            var path = new Path({
                segments: [p1a, p2a, p2b, p1b],
                style: ball1.style,
                closed: true
            });
            var segments = path.segments;
            segments[0].handleOut = getVector(angle1a - pi2, radius1);
            segments[1].handleIn = getVector(angle2a + pi2, radius2);
            segments[2].handleOut = getVector(angle2b - pi2, radius2);
            segments[3].handleIn = getVector(angle1b + pi2, radius1);
            return path;
        }

        // ------------------------------------------------
        function getVector(radians, length) {
            return new Point({
                // Convert radians to degrees:
                angle: radians * 180 / Math.PI,
                length: length
            });
        }
    </script>

但现在我希望<script>唯一在它不是触摸设备时执行。 条件本身不是问题。这有效（由警报确认）：

<script> // IF MOBILE-DEVICE, TURN METABALLS OFF: </script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js" type="text/javascript"></script>
<script>
    if(jQuery.support.touch){
        alert( "Touch enabled" );
    }
    else {
        alert( "No touch enabled" );
        function loadjsfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjsfile("tl_files/metaballs.js", "js") //dynamically load and add this .js file
    }
</script>

如您所见，我将 paperjs 中的脚本包含到一个文件中，并希望按条件启动它。 这似乎不像我那样工作？怎么了？

4

1 回答 1

0

看看这个headjs。

使用此插件，您可以根据条件加载脚本。

例子，

// head.ready(callback)
// head.test(test, success, failure, callback)

head.ready(function() {
    head.test(
        (!jQuery.support.touch),
        ["tl_files/metaballs.js",],
        function() {


           // write your code here
        }
    );
});
于 2013-11-22T08:00:00.593 回答