个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
输入:
一些文本包含常规单词和特殊单词/用#分隔的字符。 Font 和 fontSize 是不变的，可以说没有任何样式的 Arial 14。例如:
Lorem ipsum dolor #sit# amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore #et# dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis #aute# irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur #sint# occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
输出:
当用户单击#someSeparatedWord# 时，我需要在控制台中记录该词(在我的示例中，用户可以单击“sit”、“et”、“aute”、“sint”，它只会记录这些词)。那么问题在于如何获取或计算这个字/字符 Canvas 坐标？
最佳答案
您的 # delmiters 无法识别单词，因为 context.fillText 在 Canvas 上绘制单词。
那些文字成为 Canvas 位图中无法识别的部分。
您需要做的是使用 context.measureText 映射每个单词的边界框。
然后您可以针对这些边界框测试单击的 mouseX/mouseY 位置。
这是示例代码和演示:http://jsfiddle.net/m1erickson/c9nQj/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
$results=$("#results");
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var text="Lorem ipsum dolor #sit# amet, consectetur adipisicing elit";
var words=text.split(" ");
var wordsBB=new Array(words.length);
ctx.font="14px arial";
var length=ctx.measureText(words[0]).width;
wordsBB[0]={
x:0,
y:0,
width:length,
height:16
}
var accumLength=length;
for(var i=1;i<words.length;i++){
var length=ctx.measureText(" "+words[i]).width;
wordsBB[i]={
x:accumLength,
y:0,
width:length,
height:16
}
accumLength+=length;
}
ctx.fillText(text,0,15);
ctx.lineWidth=0.50;
for(var i=0;i<words.length;i++){
var bb=wordsBB[i];
ctx.strokeRect(bb.x,bb.y,bb.width,bb.height);
}
function handleMouseMove(e){
e.preventDefault();
var x=parseInt(e.clientX-offsetX);
var y=parseInt(e.clientY-offsetY);
$results.text("---");
for(var i=0;i<wordsBB.length;i++){
var bb=wordsBB[i];
if(x>bb.x && x<bb.x+bb.width && y>bb.y & y<bb.y+bb.height){
$results.text(words[i]);
}
}
}
$("#canvas").mousemove(function(e){handleMouseMove(e);});
}); // end $(function(){});
</script>
</head>
<body>
<p>Hover over a word.</p>
<h2 id="results">---</h2>
<canvas id="canvas" width=400 height=50></canvas>
</body>
</html>
此演示使用 html Canvas 。对于 kineticJS，您可以在离屏 Canvas 上进行这些边界框计算，然后在 Kinetic.Text 节点上使用这些边界框。
另请注意，您必须逐行计算边界框，因为第 1 行和第 2 行的框 y 坐标会有所不同，等等。
关于javascript - 通过 Kinetic.js 文本元素中的字符串索引获取单词/字符屏幕位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22552765/
24
4
0
这几天我一直在努力。我一直在自学 CSS，所以对菜鸟好一点。我正在创建一个推荐 slider 。推荐以 3 个 block 显示。我希望前 2 个下降，第 3 个上升。但是当 slider 激活时，无
我最近开始学习 Nodejs，现在我很困惑我的网络应用程序使用什么，html 还是 ejs (Express)。 Ejs 使用 Express 模块，而 .html 使用 HTML 模块。我的第一个问
假设我们有一个 PostgreSQL 表contacts，每条记录都有一堆带标签的电子邮件地址(标签和电子邮件对)——其中一个是“主要”。 存储方式如下: id 主键 电子邮件 文本 email_la
我成功为一种新的tesseract语言编写了traineddata文件，但是当我完成时，我继续收到以下错误: index >= 0 && index = 0 && 索引 < size_used_ :E
这个问题已经有答案了: How to deal with SettingWithCopyWarning in Pandas (21 个回答) 已关闭 4 年前。 假设我有一个像这样的数据框，第一列“密
如果我有一个位置或行/列同时用于 A 和 B 位置，请检查 B 是否与 A 成对角线？ 1 2 3 4 5 6 7 8 9 例如，我如何检查 5 是否与 7 成对角线？ 此外，如果我检查 4 是
MongoDB：索引 一、 创建索引 默认情况下，集合中的_id字段就是索引，我们可以通过getIndexes()方法来查看一个集合中的索引 > db.user.getIndexes() [ { "v
一、索引介绍 索引是一种用来快速查询数据的数据结构。 B+Tree就是一种常用的数据库索引数据结构，MongoDB采用B+Tree 做索引，索引创建在colletions上。 MongoDB不使用索引
我无法决定索引。 就像我有下面的查询需要太多时间来执行: select count(rn.NODE_ID) as Count, rnl.[ISO_COUNTRY_CODE] as Cou
我有这些表: CREATE TABLE `cstat` ( `id_cstat` bigint(20) NOT NULL, `lang_code` varchar(3) NOT NULL,
我正在尝试找到一种方法来提高包含 IP 范围的 mysql 表的性能(在高峰时段每秒最多有 500 个 SELECT 查询(!)，所以我有点担心)。 我有一个这种结构的表: id smallint(
jquery index() 似乎无法识别元素之一，总是说“无法读取未定义的属性‘长度’”这是我的代码。mnumber 是导致问题的原因。我需要 number 和 mnumber 才能跟踪使用鼠标，并
我们有一个包含近 4000 万条记录的 MongoDB 集合。该集合的当前大小为 5GB。此集合中存储的数据包含以下字段: _id: "MongoDB id" userid: "user id" (i
文档说:如果你有多个字段的复合索引，你可以用它来查询字段的开始子集。所以如果你有一个索引一个，乙，丙你可以用它查询一种一个，乙a,b,c 我的问题是，如果我有一个像这样的复合索引一个，乙，丙我可以查询
我正在使用 $('#list option').each(function(){ //do stuff }); 循环列表中的选项。我想知道如何获取当前循环的索引？ 因为我不想让 var i = 0;循
MySQL索引的建立对于MySQL的高效运行是很重要的，索引可以大大提高MySQL的检索速度。 打个比方，如果合理的设计且使用索引的MySQL是一辆兰博基尼的话，那么没有设计和使用索引的MySQL
SQLite 索引（Index） 索引（Index）是一种特殊的查找表，数据库搜索引擎用来加快数据检索。简单地说，索引是一个指向表中数据的指针。一个数据库中的索引与一本书后边的索引是非常相似的。
我是 RavenDB 的新手。我正在尝试使用多 map 索引功能，但我不确定这是否是解决我的问题的最佳方法。所以我有三个文件:Unit、Car、People。 汽车文件看起来像这样: { Id: "
我有以下数据，我想根据范围在另一个表中建立索引 我想要实现的是，例如，如果三星的销售额为 2500，则折扣为 2%，低于 3000 且高于 1000 我知道它可以通过索引来完成，与多个数组匹配，然后指
我正在检查并删除 SQL 数据库中的重复和冗余索引。 所以如果我有两个相同的索引，我会删除。 例如，如果我删除了重叠的索引... 索引1:品牌、型号 指标二:品牌、型号、价格 我删除索引 1。 相同顺
我是一名优秀的程序员,十分优秀！