我正在尝试创建的是一个小的画布小部件,它允许用户动态地在图像上创建一个形状,然后将其放置在引起他们兴趣的区域上方,实际上它是一个荧光笔.
问题是添加缩放功能,因为当我放大图像时我想确保;
以下是我制作的两个例子,其中两个都没有正常工作;
第一个例子 - getBoundingRect不会更新并绑定到图像
第二个例子 - getBoundingRect确实更新并绑定到分组对象
从链接描述中你可以看到我认为我已经缩小了问题范围,或者至少注意到脚本与getBoundingRect行为方式之间的关键区别.
第一个插件似乎工作正常,直到你尝试放大多次并以更大的缩放级别,然后它似乎开始窃听(可能需要点击几下并且有点乱,这是非常不一致的).第二个插头非常紧张,不能很好地工作.
我已经坚持了一个星期左右,我现在正处于突破点!所以真的希望有人可以指出我做错了什么?
第一个插件下面的代码片段;
// creates group
var objs = canvas.getObjects();
var group = new fabric.Group(objs, {
status: 'moving'
});
// sets grouped object position
var originalX = active.left,
originalY = active.top,
mouseX = evt.e.pageX,
mouseY = evt.e.pageY;
active.on('moving', function(evt) {
group.left += evt.e.pageX - mouseX;
group.top += evt.e.pageY - mouseY;
active.left = originalX;
active.top = originalY;
originalX = active.left;
originalY = active.top;
mouseX = evt.e.pageX;
mouseY …Run Code Online (Sandbox Code Playgroud) 我正在尝试使用联接查询来构造单行结果,将联接表中的行包装到 json 数组中。
这是一个示例方案;
CREATE TABLE main(id int);
INSERT INTO main values(1);
create TABLE sub1(id int, main_id int, lang int);
insert into sub1 values (1, 1, 1);
insert into sub1 values (1, 1, 2);
create TABLE sub2(id int, main_id int, lang int);
insert into sub2 values(1, 1, 1);
Run Code Online (Sandbox Code Playgroud)
我的查询:
select main.id,
array_to_json(array_agg(sub1.lang)) as sub1,
array_to_json(array_agg(sub2.lang)) as sub2
from main
inner join sub1 on main.id = sub1.main_id
inner join sub2 on main.id = sub2.main_id
where main.id = 1
group by main.id …Run Code Online (Sandbox Code Playgroud) 我试图从页面返回整个 windows 对象,然后遍历 puppeteer 之外的对象。
我正在尝试访问 Highcharts 属性中的数据,为此我需要访问 window 对象。正常的 javascript 代码类似于window.Highcharts.charts[0].series[0].data.
我认为最简单的方法是使用 puppeteer 访问该站点,然后将 windows 对象发回给我,然后我可以像任何其他 JS 对象一样在 puppeteer 之外使用它。
阅读文档后,我发现很难返回对象,因为它看起来只是将“窗口”放入 chrome 控制台。我不确定我错过了什么?
我已经阅读了文档,以下两种方法似乎应该有效?
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.example.com', {waitUntil: 'networkidle2'});
// METHOD 1
// Create a Map object
await page.evaluate(() => window.map = new Map());
// Get a handle to the Map object prototype
const mapPrototype = await page.evaluateHandle(() => Map.prototype);
// Query all map …Run Code Online (Sandbox Code Playgroud) chromium google-chrome-extension node.js web-scraping puppeteer
我正在尝试使用postgres创建用于自定义类别的存储系统。
在寻找潜在的解决方案之后,我决定尝试使用ltree ;
这是下面的原始数据示例;
+----+---------+---------------------------------+-----------+
| id | user_id | path | name |
+----+---------+---------------------------------+-----------+
| 1 | 1 | root.test | test |
| 2 | 1 | root.test.inbox | inbox |
| 3 | 1 | root.personal | personal |
| 4 | 1 | root.project | project |
| 5 | 1 | root.project.idea | idea |
| 6 | 1 | root.personal.events | events |
| 7 | 1 | root.personal.events.janaury | january |
| …Run Code Online (Sandbox Code Playgroud) 我有一个大图像最初加载到我的画布,然后我希望能够在它上面绘制矩形.当我拖动图像时,我仍然希望矩形出现在图像上,而不是将它们推到后面.
这是一个插件;
http://plnkr.co/edit/iJV0bZrlCG4CJXlhDw8w?p=preview
如果可能的话,我希望能够确保无论如何,图像总是在后面?我环顾四周,无法找到解决方案.它变得越来越令人沮丧!
最初我认为它会像这样简单;
canvas.on('object:moving', function(e) {
var obj = e.target;
console.log(obj.id)
if (obj.id === 'img') {
canvas.sendToBack(obj)
} else {
canvas.bringToFront(obj)
}
});
Run Code Online (Sandbox Code Playgroud)
希望有人可以帮忙!
这是我的图表;
http://plnkr.co/edit/Cej2NcyUWysAsKiMAEXj?p=preview
我试图在沿线路径的每个数据点上添加一个圆圈,但似乎找不到办法做到这一点。
这是我用来绘制图形的圆/线的代码;
var selectLine = svg.selectAll(".line")
.data([data])
var selectCircle = svg.selectAll(".circle")
.data([data])
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
selectLine.enter().append("path")
.attr("class", "line")
.attr("d", line);
selectCircle.enter().append("circle")
.attr("class", "circle")
.attr("r", 3.5)
.attr("cx", function(d) {
return x(new Date(2016, moment(d.date, 'MMMM').format('M') - 1, 1))
})
.attr("cy", function(d) {
return y(d.close)
})
Run Code Online (Sandbox Code Playgroud)
非常感谢任何帮助/建议!
谢谢
我一直在查看文档,试图找到一种方法来轻松激活 上的选择菜单hover,而不仅仅是click.
不幸的是,我似乎找不到方法(如果存在),并希望有人能指出我正确的方向?
这是一个 plnk,
http://plnkr.co/edit/GTeyWfOp9aTd1B0Be0Hs?p=preview
谢谢大家
javascript ×4
canvas ×2
fabricjs ×2
html5 ×2
html5-canvas ×2
postgresql ×2
sql ×2
chromium ×1
d3.js ×1
jquery ×1
node.js ×1
puppeteer ×1
web-scraping ×1