Question

我正在学习使用raphael的SVG（也是编程中的新手），我正在制作一个时钟。

正如您所看到的那样，钟面的背景图像位置不是很好，所以我想重置它在钟面上的位置。我试过了rect-clip，但似乎无效。

这是我的代码：

  // new paper
  var paper = new Raphael(0,0,700,700);
  var background = paper.rect(0,0,1000,1000);
  background.attr({fill:"pink"});

  // clock face
  var face = paper.circle(350, 350, 250);
  var img = "url('deep.jpg')";
  face.attr({stroke:"black", "stroke-width":12,fill:img});

另一个问题是转换效果，我的英语不好，但我会尝试解释我的问题。

我正在使用“bounce”效果进行秒针滴答。实际上，它正在发挥作用。但是，它不会移动到 360 程度再次开始旋转，它只会移动到 359 度然后从 358 返回到 0 重新开始。

换句话说：秒针仅从 0 - 59 秒移动，然后从 58 返回 0 再次开始移动，不能直接从 59 - 60 移动开始移动。

这是我的转换代码：

function startSeconds()
    {
      // seconds rotate degree calculation
      var now = new Date();
      // world clock part
      var localtime = now.getTime();
      var localOffset = now.getTimezoneOffset() * 60000;
      var utc = localtime + localOffset;
      var target = utc + (3600000 * offset);
      var update = new Date(target);

      var sec =update.getSeconds();
      var sd = 6 * sec;

      seconds.animate({
        transform: [ 'r',sd,350,350]
      },500, "bounce");

      // play the clock ticking sound per second
      tick.play();

      secAnimate = setTimeout(function(){startSeconds()},500);
    }

如果删除转换效果bounce，则不会发生此问题。所以我不知道它为什么存在，并且希望在没有我提到的问题的情况下保持bounce效果。

希望有人可以帮我解决这两个问题。

JavaScript在Raphael中设置背景图像和转换效果

0 个答案: