忽略图像选择
Paper.js Ignoring an image selection
我正在使用Paper.js,我正在尝试构建"Selection-Via-Intersection"
详细说明我的意思是用户绘制一个选择矩形,并且其轮廓与选择矩形中的任何一个点相交的项目被选中。
现在路径项都很好,但是栅格图像带来了问题:
是一种忽略选择中的栅格图像或使其以某种方式与栅格一起工作的方法吗(如果是的话,我会感激一个简单的答案,否则我将无法实现它,业余爱好者和所有人)。
与我目前的代码Chrome返回:Uncaught TypeError:无法读取属性'length'的未定义
这是目前为止的代码:
// Returns path points which are contained in the rect.
function getSegmentsInRect(rect) {
var segments = [];
function checkPathItem(item) {
if (item._locked || !item._visible || item._guide)
return;
var children = item.children;
if (!rect.intersects(item.bounds))
return;
if (item instanceof paper.Path) {
for (var i = 0; i < item.segments.length; i++) {
if (rect.contains(item.segments[i].point))
segments.push(item.segments[i]);
}
} else {
for (var j = children.length-1; j >= 0; j--)
checkPathItem(children[j]);
}
}
for (var i = paper.project.layers.length - 1; i >= 0; i--) {
checkPathItem(paper.project.layers[i]);
}
return segments;
}
// Returns all items intersecting the rect.
// Note: only the item outlines are tested.
function getPathsIntersectingRect(rect) {
var paths = [];
var boundingRect = new paper.Path.Rectangle(rect);
function checkPathItem(item) {
var children = item.children;
if (item.equals(boundingRect))
return;
if (!rect.intersects(item.bounds))
return;
if (item instanceof paper.PathItem) {
if (rect.contains(item.bounds)) {
paths.push(item);
return;
}
var isects = boundingRect.getIntersections(item);
if (isects.length > 0)
paths.push(item);
} else {
for (var j = children.length-1; j >= 0; j--)
checkPathItem(children[j]);
}
}
for (var i = 0, l = paper.project.layers.length; i < l; i++) {
var layer = paper.project.layers[i];
checkPathItem(layer);
}
boundingRect.remove();
return paths;
}
// Returns bounding box of all selected items.
function getSelectionBounds() {
var bounds = null;
var selected = paper.project.selectedItems;
for (var i = 0; i < selected.length; i++) {
if (bounds == null)
bounds = selected[i].bounds.clone();
else
bounds = bounds.unite(selected[i].bounds);
这就是我如何定义我的光栅
function placeImage() {
var raster = new paper.Raster('mona');
raster.addChild;
raster.position = paper.view.center;
raster.selected = true;
raster.index = 0;
}
我们可以使用item.type
来检查与选择矩形相交的项目是否为 "栅格" 。
我添加了一个额外的IF
语句来完成这个任务。
IF(item.type === "Raster"){
return;
}
这样,具有Raster类型的项将被忽略。
然而,如果有一个简单的方法有一个栅格与选择矩形这将是一个更好的答案,虽然我建议的解决方案解决了这个问题。
UPDATE: Paper.js v0.9.17使用className而不是type来标识项目的类型。
因此上面的函数变为:
IF(item.className === "Raster"){
return;
}
相关文章:
- 如何使用JavaScript/jQuery选择图像的多边形区域
- jQuery blimp文件上传-上传后保留选择图像行
- 如何在Imgareaselect中选择图像根据像素进行选择
- 如何在选择图像时显示刻度图像
- jquery选择图像不起作用
- 悬停并选择图像贴图的状态
- 如何在选择图像时显示图像
- 在 JavaScript 中的 ClickEvent 上选择图像
- 响应式文件管理器.防止在选择图像时模式关闭
- 将鼠标悬停在地图上时,取消选择图像映射的选定区域
- 建议为选择图像创建代码
- 选择图像(但尚未上传)时更改输入类
- CKFinder 如何在选择图像时获取尺寸 URL 和尺寸(宽度/高度)(文件:选择)
- 通过 jscript 随机选择图像时动态全尺寸调整图像大小的问题
- html5选择图像并进行操作
- DNN:HTML编辑器不显示要选择图像的文件夹
- 选择图像的一部分,并使用jQuery检索其坐标
- 如何在单击时仅选择图像的一部分
- 在javascript中选择图像
- 从弹出窗口中选择图像并显示在主页面中