PaperJS 用颜色填充光栅而不遍历像素
PaperJS fill a raster with a color without iiterating over the pixels
在 PaperJS 中,是否可以在不遍历每个像素的情况下用颜色填充光栅?
假设您有一个具有一定透明度的 PNG,没有透明度的像素将具有不同的颜色。
据我所知,您可以遍历每个像素 http://paperjs.org/tutorials/images/using-pixel-colors/ 并手动执行(为每个图像像素创建一个备用像素),但理想情况下,有一种解决方案不需要逐个像素地执行此操作。
最好将光栅用作剪切蒙版以显示其下方的颜色,但我认为这仅适用于路径。
感谢任何帮助
另一种方法是巧妙地使用混合模式。
原则是使用光栅作为位于其上的形状的 alpha 源。
我现在没有太多时间来详细说明,但这里有一个 sketch 应该可以让您步入正轨。
const url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF0WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIxLTAzLTA5VDE5OjExOjQwKzAxOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIxLTAzLTA5VDE5OjExOjQwKzAxOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wMy0wOVQxOToxMTo0MCswMTowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NzM5MmY2Ni03YmY3LWZiNGItYThmZS0yZmJiNmZlMTNlOWYiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo4MDM3MWU3Yi1lOGJhLWFlNDEtYjkw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';
const raster = new paper.Raster(url);
raster.blendMode = 'destination-in';
raster.onLoad = () => {
const rectangle = new Path.Rectangle({
rectangle: raster.bounds,
fillColor: 'orange'
});
new Group([rectangle, raster]);
project.activeLayer.fitBounds(view.bounds.scale(0.8));
};
下一个挑战是确定此效果的范围,以便混合不会影响场景的其他形状。关于这个主题,我在 Paper.js 仓库中发布了一些高级示例,你应该可以找到它们。
在 PaperJS 中,是否可以在不遍历每个像素的情况下用颜色填充光栅?
假设您有一个具有一定透明度的 PNG,没有透明度的像素将具有不同的颜色。
据我所知,您可以遍历每个像素 http://paperjs.org/tutorials/images/using-pixel-colors/ 并手动执行(为每个图像像素创建一个备用像素),但理想情况下,有一种解决方案不需要逐个像素地执行此操作。
最好将光栅用作剪切蒙版以显示其下方的颜色,但我认为这仅适用于路径。
感谢任何帮助
另一种方法是巧妙地使用混合模式。
原则是使用光栅作为位于其上的形状的 alpha 源。
我现在没有太多时间来详细说明,但这里有一个 sketch 应该可以让您步入正轨。
const url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF0WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIxLTAzLTA5VDE5OjExOjQwKzAxOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIxLTAzLTA5VDE5OjExOjQwKzAxOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wMy0wOVQxOToxMTo0MCswMTowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NzM5MmY2Ni03YmY3LWZiNGItYThmZS0yZmJiNmZlMTNlOWYiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo4MDM3MWU3Yi1lOGJhLWFlNDEtYjkw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';
const raster = new paper.Raster(url);
raster.blendMode = 'destination-in';
raster.onLoad = () => {
const rectangle = new Path.Rectangle({
rectangle: raster.bounds,
fillColor: 'orange'
});
new Group([rectangle, raster]);
project.activeLayer.fitBounds(view.bounds.scale(0.8));
};
下一个挑战是确定此效果的范围,以便混合不会影响场景的其他形状。关于这个主题,我在 Paper.js 仓库中发布了一些高级示例,你应该可以找到它们。