小编ale*_*exc的帖子

在包含区域内动态创建分组对象?(html5canvas - fabric.js)

我正在尝试创建的是一个小的画布小部件,它允许用户动态地在图像上创建一个形状,然后将其放置在引起他们兴趣的区域上方,实际上它是一个荧光笔.

问题是添加缩放功能,因为当我放大图像时我想确保;

  1. 动态创建的形状无法在图像区域外的任何位置拖动.(已完成 - 依赖第2步)
  2. 您无法将图像拖出页面视图,画布区域无法显示空白区域.必须始终显示部分图像,并填充整个画布区域.(问题)

以下是我制作的两个例子,其中两个都没有正常工作;

第一个例子 - 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)

javascript html5 canvas html5-canvas fabricjs

7
推荐指数
1
解决办法
1002
查看次数

使用 postgresql 将多个联接的结果合并为单行

我正在尝试使用联接查询来构造单行结果,将联接表中的行包装到 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)

sql postgresql

6
推荐指数
1
解决办法
1554
查看次数

使用 puppeteer 返回窗口对象

我试图从页面返回整个 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

6
推荐指数
1
解决办法
1万
查看次数

如何使用ltree查询结果创建分层json对象?(PostgreSQL的)

我正在尝试使用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)

sql postgresql

5
推荐指数
0
解决办法
283
查看次数

使用fabric.js移动元素时如何将图像保留在画布的背面?

我有一个大图像最初加载到我的画布,然后我希望能够在它上面绘制矩形.当我拖动图像时,我仍然希望矩形出现在图像上,而不是将它们推到后面.

这是一个插件;

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)

希望有人可以帮忙!

javascript html5 canvas html5-canvas fabricjs

3
推荐指数
1
解决办法
922
查看次数

如何在折线图路径 d3.js 上添加圆圈

这是我的图表;

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)

非常感谢任何帮助/建议!

谢谢

javascript d3.js

2
推荐指数
1
解决办法
5418
查看次数

使用 select2 在悬停/鼠标悬停时激活选择菜单

我一直在查看文档,试图找到一种方法来轻松激活 上的选择菜单hover,而不仅仅是click.

不幸的是,我似乎找不到方法(如果存在),并希望有人能指出我正确的方向?

这是一个 plnk,

http://plnkr.co/edit/GTeyWfOp9aTd1B0Be0Hs?p=preview

谢谢大家

javascript jquery jquery-select2

1
推荐指数
1
解决办法
3848
查看次数