Question

我有两个功能。第一个创建一个组，绘制一条线，向组添加一条线，获取其坐标并在文本行下显示它们，文本也会添加到组中。其次，动画组动画。

  animate: function(x, y, draw) {
    this.group.animate(1000, '-', 0).move(x, y);
  },

  linePainting: function(x1, y1, x2, y2, x3, y3, textY, draw, color) {
    this.group = draw.group().x(x1).y(y1);
    this.line = draw.line(x2, y2, x3, y3).stroke({ width: 1, color: "#" + color });
    this.group.add(this.line);
    pos = this.group.x().toFixed(1);
    this.text = this.group.add(draw.text(pos.toString()).x(-10).y(textY));
  },

我怎么能在1调用animate后，函数linePainting只被调用一次。

我有2个问题。

如何更改群组中的文字？
是否可以为文字制作动画？例如，如果有100个，则以下数字为150，在一秒之内顺利地从100到150。

我非常希望Wout问题的答案

Answer 1

首先：您在$(document).ready(function(){ // using jQuery function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } var csrftoken = getCookie('csrftoken'); function vote (valueID) { $.ajax({ type: 'POST', url: '/', data: { "value": valueID }, success: function () { //$("#story-vote-" + valueID).hide(); $("#story-title-" + valueID).css({"margin-left": "15px"}); }, headers: { 'X-CSRFToken': csrftoken } }); return false; } $("a.vote").click(function () { var valueID = parseInt(this.id.split("-")[2]); return vote(valueID); }) function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function(xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } }); });中添加了一些内容，但这不是您可能想到的文本，而是因为this.text返回add()而不是添加的元素。

使用this取代put()。

现在您只需致电text即可更改文字。

第二：~~没有什么比文本变形更好的了（如何实现？）。但是，您可以在每个动画步骤中轻松地将文本更改为其他数字。~~

查看svg.textmorph.js，它可以使文本动画化。你需要一个svg-font。

使用动画更改组中的svg.js文本

1 个答案: