如何避免在拉斐尔中使用文本？

发布于 2024-12-21 06:38:56 字数 471 浏览 2 评论 0原文

我最近花了很多时间研究 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 画布来正确显示我需要的所有文本和信息，然后将画布移动到可以插入到我的 raphael 项目中的图像会更有意义。

有谁知道任何替代解决方案，或者我如何创建画布，并将该画布的图像拉入我的拉斐尔项目中？

原文

I have recently been working a lot with the text feature of raphael, and I have been having a huge number of issues.

My application requires the text to be loaded into draggable, zoomable raphael sets. Unfortunately the text from,

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

does not scale the text along with with the set.

I tried a number of different approaches to attack this problem, including paper.print(), and have had nothing but issues.

I am thinking at this point, it would make lots more sense to dynamically generate an HTML5-canvas to properly display all of the text and information I need, then move the canvas into an image that can be inserted into my raphael project.

Does anyone know of any alternative solutions, or how i might go about creating a canvas, and pulling the image of this canvas into my raphael project?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酒几许 2024-12-28 06:38:56

使用 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);

然后为了在我的拉斐尔集中实现它，我做了：

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)
)

Using HTML5 worked out great.

I did the following:

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);

and then to implement it in my raphael set, i did:

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)
)

回复收藏 0 原文

~没有更多了~