Question

我使用JS库Jelly.js使用svgs和canvas创建类似果冻的效果。 Here is an example of something I've created with this library。请注意在桌面和Chrome中查看此内容。当我尝试查看我在Firefox或Edge中链接的示例时，它没有显示出来。我尝试了故障排除和不同的配置，看看可能是什么问题，但无法让它发挥作用。然后我认为这可能只是图书馆的一个限制，但他们有一个example here使用了库，它可以在Firefox和边缘工作。所以在这一点上我很困惑为什么它在我的Firefox和Edge的例子中不起作用，但在Chrome中运行良好？

    <svg width="600px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 600 600;" xml:space="preserve" style="display: none">
<g class="jelly-svg">
    <circle id="jelly-path" class="st0" cx="301" cy="300" r="200"/>
</g>
</svg>
<div class="jelly-container">
<!-- Canvas to draw the jelly pentagon -->
<canvas class="jelly-canvas"></canvas>

<!-- Text in the centroid of the jelly pentagon -->
<div class="centroid-container">
    <div class="centroid-text">
      </div>
</div>

/* General styles */

html, body {
  margin: 0;
}

.jelly-svg {
  display: none;
}


/* Jelly styles */

.jelly-container {
  position: relative;
  display: inline-block;
/*   left: 50%; */
/*   margin-left: -200px; */
/*   background: blue; */

}

.jelly-container, .jelly-canvas {

  width: 600px;
  height: 600px;
  cursor: default;
}


/* It's important to position the `.centroid-container` in the top-left corner
   This way the `.centroid-text` will be positioned in the center (with JavaScript) */
.centroid-container {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.centroid-text {
  font-size: 20px;
  color: white;
}


/* Setup options */

var options = {
    paths: '#jelly-path',     // Shape we want to draw
    pointsNumber: 10,            // Number of points
    maxDistance: 70,             // Max distance among points
    color: '#00B0FF',
    maxIncidence: 50,
  mouseIncidence: 100,
    intensity: .97,
    centroid: '.centroid-text'   // Element to move accordingly with the centroid of the shape
    // debug: true               // Uncomment this to see the points
};

/* Initializing jelly */

var jelly = new Jelly('.jelly-canvas', options);


/* Check hover item (shape) and update cursor */

var container = document.querySelector('.jelly-container');
var hoverIndex = -1;

function checkHover() {
    // The `getHoverIndex` function will return the index of the shape being hovered, or -1
    hoverIndex = jelly.getHoverIndex();
    container.style.cursor = hoverIndex === -1 ? 'default' : 'pointer';
    window.requestAnimationFrame(checkHover);
}
window.requestAnimationFrame(checkHover);

Jelly.js仅在Chrome中工作。不是Firefox，Edge等

0 个答案: