Question

我最近一直在研究raphael的文本功能，而且我遇到了很多问题。

我的应用程序需要将文本加载到可拖动，可缩放的raphael集中。不幸的是，来自

的文字

var title = paper.text(0,0,"this is text");
...
mySet.push(title);
...
mySet.animate({scale: ".5 .5 0 0"},1000,function(){...})

不会随着集合缩放文本。

我尝试了许多不同的方法来解决这个问题，包括paper.print（），并且只有问题。

我在想这一点，动态生成HTML5-canvas以正确显示我需要的所有文本和信息，然后将画布移动到可以插入到我的raphael项目中的图像中会更有意义。

是否有人知道任何替代解决方案，或者我如何创建画布，并将此画布的图像拉入我的raphael项目？

Answer 1

使用HTML5非常棒。

我做了以下事情：

var canvas = jQuery("<canvas width=300px height=400px />");
var context = canvas[0].getContext("2d");

context.font = "10pt Calibri ";
context.textAlign = "left";
context.textBaseline = "top";

context.fillText("this is text", xPos, yPos);

然后在我的raphael集中实现它，我做了：

var img = canvas[0].toDataURL("image/png"); //turns the canvas object into a png and returns the dynamic url 
var bb = mySet.getBBox();
mySet.push(
  paper.image(img,bb.x,bb.y,300,400)
)

避免在raphael中使用文本的方法？

1 个答案: