个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
点击图片点击路径。在击中三个或更多传球后单击第一个点以关闭传球。当路径关闭时，我想选择路径的内部并实现模糊范围的功能。目前，关闭路径时不会发生任何事情。
最佳答案
我认为你弄错了 Paper.js渲染引擎。
它在 <canvas> 的上下文中绘制其项目元素，因此您将能够从开发人员工具访问的只是此 Canvas 及其图像数据。
您将无法定位您的路径并使用选择器对其进行操作，这似乎是您正在尝试做的事情。
无论如何，不幸的是，Paper.js目前不支持过滤器。
因此，一种选择可能是利用 Canvas 上下文 filter属性(实验性)或自己实现模糊算法。
然后，同时保持 Paper.js绘图实用程序，您可以管理多个 Canvas 并进行智能合成以产生您正在寻找的效果。
这是一个fiddle演示一个可能的实现。
请注意，为了演示，我简化了您的用例，但您应该能够很容易地使其适应您的情况。
在这个例子中，我使用了 3 个不同的 Canvas :
- 最下面的是绘制原图
- 中间的是画模糊部分
- 最上面的用于绘制我们将用于合成的形状，并将在最后隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug Paper.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-core.min.js"></script>
<style>
html,
body {
margin : 0;
overflow : hidden;
height : 100%;
}
/* We position canvases on top of each other. */
canvas {
position : absolute;
top : 0;
left : 0;
width : 100vw;
height : 100vh;
}
</style>
</head>
<body>
<canvas id="bottom-canvas"></canvas>
<canvas id="middle-canvas"></canvas>
<canvas id="top-canvas"></canvas>
<script>
// Get canvases references.
const bottomCanvas = document.getElementById('bottom-canvas');
const middleCanvas = document.getElementById('middle-canvas');
const topCanvas = document.getElementById('top-canvas');
// Initialise 2 PaperScopes.
const bottomScope = new paper.PaperScope();
bottomScope.setup(bottomCanvas);
const topScope = new paper.PaperScope();
topScope.setup(topCanvas);
// For middle canvas, we need to adjust the size manually as Paper.js doesn't handle it.
middleCanvas.width = middleCanvas.offsetWidth;
middleCanvas.height = middleCanvas.offsetHeight;
// Draw the image on the bottom canvas.
new paper.Raster({
source: 'https://i.imgur.com/6N0Zwag.jpg',
crossOrigin: 'anonymous',
position: bottomScope.view.center,
parent: bottomScope.project.activeLayer,
// When image is loaded...
onLoad: function() {
// ...make it fit the whole canvas.
this.fitBounds(bottomScope.view.bounds, true);
// Draw a circle on the top canvas that represents the user drawn shape
// that we want to use for blurring.
new paper.Path.Circle({
center: topScope.view.center,
radius: 200,
fillColor: 'orange',
parent: topScope.project.activeLayer
});
// We manually call the canvas view update to make sure that everything
// is drawn before we play with image data.
bottomScope.view.update();
topScope.view.update();
// Get middle canvas context to be able to draw on it.
const middleCanvasContext = middleCanvas.getContext('2d');
// Draw the bottom canvas image on the middle canvas with the blur filter applied.
middleCanvasContext.filter = 'blur(15px)';
middleCanvasContext.drawImage(bottomCanvas, 0, 0);
// In order to see the clear part of the bottom canvas image,
// we need to remove from middle canvas what is not on top canvas.
// For that, we use "destination-in" composite operation.
middleCanvasContext.filter = 'none';
middleCanvasContext.globalCompositeOperation = 'destination-in';
middleCanvasContext.drawImage(topCanvas, 0, 0);
// Now, we need to hide the top canvas, to see the middle one below it.
topCanvas.style.display = 'none';
}
});
</script>
</body>
</html>
关于javascript - 我想应用过滤器 : blur to any shape，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56885385/
25
4
0
我有一个对象数组，我想在键传入“filter”过滤器时提取值。下面是我尝试过的 Controller 代码片段，但我得到的响应类型未定义。请帮我找出哪里出错了。 var states = [{"HI
如果任何 J2EE 应用程序直接访问 servlet，然后 servlet 将相同的请求转发到某个 .jsp 页面。 request.getRequestDispatcher("Login.jsp")
我有一个带有图像缩略图的表单，可以通过复选框进行选择以进行下载。我想要一个包含 jQuery 中图像的数组，用于 Ajax 调用。 2个问题: - 表格顶部有一个复选框，用于切换我想要从映射中排除的所
我必须从服务器转储数据库，将 .sql 传输到另一台服务器，然后运行以下脚本以使用此语法删除某些行: DELETE wp_posts FROM wp_posts INNER JOIN wp_postm
我想从目录中过滤掉特定类型的文件，但收到错误“ token 语法错误，删除这些 token ”: File dir = new File("c:/etc/etc"); File[] f
几乎所有的 Web 应用程序都依赖外部的输入。这些数据通常来自用户或其他应用程序（比如 web 服务）。通过使用过滤器，您能够确保应用程序获得正确的输入类型。 您应该始终对外部数据进行过滤！ 输
我正在开发一个由 OData 服务提供支持的搜索功能。它将返回一个或一列标题对象作为结果。我们需要搜索的许多字段不在标题对象中。它们仅在子对象(导航属性)中。能够针对子字段执行 OData 搜索并仍然
假设我有以下模型，它有一个方法 variants(): class Example(models.Model): text = models.CharField(max_length=255)
我有一个默认的列表列表，但我基本上想这样做: myDefaultDict = filter(lambda k: len(k)>1, myDefaultDict) 除了它似乎只适用于列表。我能做什么？
我正在使用 django-filter 来输出我的模型的过滤结果。那里没有问题。下一步是添加一个分页器……尽管现在已经苦苦挣扎了好几天。 views.py: def funds_overview(re
我正在做一个概念证明，我正在试验一种奇怪的行为。 我有一个按日期字段按范围分区的表，如果我设置固定日期或由 SYSDATE 创建的日期，查询的成本会发生很大变化。 这些是解释计划: SQL> SELE
如果一个或另一个值匹配，是否可以制作一个过滤器，例如一个中性的 PropertyFilter(并传递给链中的下一个过滤器)？就像是: value1 val
我是 VBA 初学者，正在尝试根据单元格值过滤数据，经过一番谷歌搜索后，我编写了一个有效的代码 Sub FilterDepartment_Sales() Sheet6.Activate
假设我在 excel 数据透视表中有两个过滤器。 两者最初都会显示筛选列的选定范围内的所有值。 当我仅在过滤器 1 中选择几个值时，过滤器 2 仍会继续显示基础数据中所选范围内特定过滤器列中的所有值。
是否可以定义自定义 build-ins (名称不再适合)在 ftl？ 由于语义前提，我不想让它成为一个函数，而是一个内置的。 最佳答案 这是不可能的，?语法是为内置函数保留的。 (顺便说一句，这意味着
我试图在 Edit | 之外添加一个链接通过插件删除wordpress管理员>用户>所有用户列表中的链接..这是我第一次尝试通过查看其他插件或搜索google来制作wordpress插件.. 我添加了
我正在尝试按照以下教程使用 django 过滤器进行分页，但该教程似乎缺少某些内容，而且我无法使用基于函数的 View 方法显示分页。 https://simpleisbetterthancomple
由于我是 Powershell 新手，因此寻求最佳实践方面的帮助， 我有一个 csv 文件，我想过滤掉 csv 中的每一行，除了包含“未安装”的行 然后，我想根据包含计算机列表的单独 csv 文件过滤
我正在尝试创建一个搜索查询，它会告诉我我作为审阅者添加到其中的打开更改，但我还没有提交最新补丁集的代码审查。这应该包括其他人已经评论过的更改，但我没有。 我能找到的最接近的是 is:reviewer
在我的 Web 应用程序中，我有 3 个主要部分 1. 客户 2. 供应商 3. 管理员 我正在使用 java session 过滤器来检查用户 session 并允许访问网站的特定部分。 因此客户只
我是一名优秀的程序员,十分优秀！