小编Nik*_*des的帖子

我想发送一个事件,将一些数据传递给监听该事件的任何事件监听器.

考虑触发事件的函数:

function click() {
  const x = 'foo'
  document.dispatchEvent(new CustomEvent('clicked'))
}

click()

如何将自定义数据传递给事件侦听器？

document.addEventListener('clicked', function(e) {
  console.log(x) // logs "foo"
})

如何在ES6中编写一个模板文字,其中包含反引号(`)及其自身(即嵌套反引号).

例如:

var query = `
  UPDATE packet
  SET
  `association` = "3485435",
  `tagname` = "associated"
 `

我需要它的原因:

在我上面的代码示例中很明显.

我正在尝试构建node-mysql查询Strings,并将它们存储在一个变量中,以便将它们传递给mySQL.mySQL查询语法要求返回UPDATE样式查询.

• 我可以让它们看起来整洁的唯一方法是使用模板文字,否则使用常规单行字符串的查询看起来很糟糕,因为在某些情况下它们最终会很长.

• 我也想避免使用终止行,\n因为它很麻烦.

在工业中,通常存在一个问题,您需要计算材料的最有效使用,无论是织物,木材,金属等.因此起点是给定尺寸的X形状,由多边形和/或弯曲制成lines和target是给定尺寸的另一个多边形.

我假设许多当前的CAM套件实现了这一点,但没有使用它们或内部的经验,使用什么样的计算算法来找到最有效的空间利用？有人能指出我讨论这个主题的书或其他参考书吗？

特别参考HTML5 FileAPI.

我正在阅读W3C规范提案,并且可以从这里阅读:http://www.w3.org/TR/file-system-api/

"该文件的工作已经停止,不应作为实施的基础参考或使用."

是FileAPI不再是一个HTML5规范还是意味着它的实现细节将只是改变？

我正在尝试将ES7的async/await与knex.js事务相结合.

虽然我可以轻松使用非事务性代码,但我正在努力使用上述异步/等待结构使事务正常工作.

我正在使用此模块来模拟async/await

这是我现在拥有的:

非交易版本:

工作正常,但不是交易

app.js

// assume `db` is a knex instance

app.post("/user", async((req, res) => {
  const data = {
   idUser: 1,
   name: "FooBar"
  }

  try {
    const result = await(user.insert(db, data));
    res.json(result);
  } catch (err) {
    res.status(500).json(err);
  }
}));

user.js的

insert: async (function(db, data) {
  // there's no need for this extra call but I'm including it
  // to see example of deeper call stacks if this is answered

  const idUser =  await(this.insertData(db, data)); …

我们正在构建一个在浏览器中运行的CAD应用程序.

• CAD代表计算机辅助设计.
• Illustrator,CorelDraw,AutoCAD等是CAD应用程序的一些示例.

它基于Paper.js,这是一个非常简洁的Canvas库,允许您以编程方式操作矢量.

问题

我目前面临的主要问题是重绘循环性能.

重绘算法是"哑"(就聪明的黑客而言,以提高性能)因而效率低且速度慢 - 渲染场景图项依赖于逐渐减慢的重绘周期.

随着绘图点的累积,每个重绘周期变得越来越慢.

重绘方案非常简单:

• 清除整个区域
• 从场景图中获取所有项目
• 重新绘制所有项目.

这个问题

在这种情况下是否有任何课堂示例进行渲染优化 - 假设我不想实现脏矩形算法(仅绘制已更改的区域)

编辑:我已经尝试过手动的现场光栅化,效果非常好,我在下面发布了一个答案.

我如何从一个创建一个SVG DOM元素String？

例:

var svgStr = '<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg"><!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --><g><title>background</title><rect fill="#fff" id="canvas_background" height="402" width="502" y="-1" x="-1"/><g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"><rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/></g></g><g><title>Layer 1</title><path id="svg_1" d="m118,242l64,-153l63,157c0,0 45,-71 49,-68c4,3 11,146 12,146c1,0 -173,-7 -173,-7c0,0 -61,-72 -61,-72c0,0 110,-156 46,-3z" fill-opacity="0.7" stroke-width="2" stroke="#995757" fill="#995757"/></g></svg>';

截至2014年初,SVG规范没有任何内置的布尔运算支持

布尔运算是用于改变大多数重叠路径的固有几何的方法.它们允许通过对更简单的形状执行操作来构造复杂的形状,并且在某种程度上类似于构造实体几何(CSG).

然而,这个问题涉及2D矢量路径.流行的路径操作是:Union,Substraction,Intersection,XOR(Exclusive Or).

周围是否有任何图书馆可以帮助我解决这个问题？

我想在jquery中获取svg路径的getBBox().我试过这样的

$("#"+ path id)[0].getBBox() -> returns x=0,y=0,width=0,height=0

我已经添加了SVG元素的路径.我在SVG中尝试了一些其他元素,例如文本节点,在这种情况下它返回一些边界框值.

如何计算SVG中路径的边界框？

<path id="container_svg_John_0" fill="none" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M -2390.2 -125.8888888888889 L 0 0 M 0 0 L 251.60000000000002 -45.77777777777778 M 251.60000000000002 -45.77777777777778 L 503.20000000000005 -11.444444444444445 M 503.20000000000005 -11.444444444444445 L 629 -183.11111111111111 "/>

我正在尝试使用SVG路径创建高性能,美观的铅笔工具.

我正在记录鼠标坐标以绘制路径.为了获得高保真路径(精确到用户的动作),我需要为每个像素移动记录一个点.

保持路径中的每个点都会产生大量的点,这对于后来的协作功能来说并不理想(来回发送大量的点效率不高),而且每次我需要操作它们时解析大路径是瓶颈

在路径的线性区域上,删除冗余点,仅保留表示段所需的点 - 我使用Ramer-Douglas-Peucker算法执行此操作.

但是简化路径会将其转换为低保真多边形

此时,路径实际上只是连接线 - 因此路径看起来是锯齿状的.

一种可能的解决方案是将路径点与Cubic Bezier连接 - 但是这在简化路径上不起作用.每个点之间的距离太大,以至于Cubic Bezier"坐得"不错,因此平滑的路径不再准确地表示用户的预期路径.

另一个解决方案是在原始路径上简单地使用"后处理"算法,例如Schneider算法 - 这个算法实际上不会实时工作,因为它是一个性能猪

理想的解决方案

(我认为)可以使用的解决方案是使用Centripetal Catmull-Rom插值.

在我研究过的所有算法中,这似乎是最有希望的:

1. 它不会在狭窄的角落产生自我交叉
2. 它更适合点,因此它更准确地代表原始路径.

是的Catmull-ROM,其插入了一系列的常规X/Y点或完成原始路径必须由曲线的算法？