如何将图像添加到 PaperJS 中的路径答案

【问题标题】：How to add image to Path in PaperJS如何将图像添加到 PaperJS 中的路径
【发布时间】：2014-12-17 02:13:42
【问题描述】：

我正在使用来自http://paperjs.org/examples/candy-crash/ 的漂亮代码。我想用图像替换颜色，这样就不会显示红色圆圈，而应该显示一个内部带有图像的圆圈。这是我认为需要修改的sn-p：

function Ball(r, p, v) {
    this.radius = r;
    this.point = p;
    this.vector = v;
    this.maxVec = 15;
    this.numSegment = Math.floor(r / 3 + 2);
    this.boundOffset = [];
    this.boundOffsetBuff = [];
    this.sidePoints = [];
    this.path = new Path({
        fillColor: {
            hue: Math.random() * 360,
            saturation: 1,
            brightness: 1
        },
        blendMode: 'screen'
    });

    for (var i = 0; i < this.numSegment; i ++) {
        this.boundOffset.push(this.radius);
        this.boundOffsetBuff.push(this.radius);
        this.path.add(new Point());
        this.sidePoints.push(new Point({
            angle: 360 / this.numSegment * i,
            length: 1
        }));
    }
}

我也在阅读光栅。但我不知道如何让这个code 与图像一起使用。感谢您的帮助。

如果我只是简单地做this.path = new Path(raster) 它是行不通的。它只显示一个静态图像，而不是所有移动的圆圈。

更新

这是一个要使用的栅格

var imgUrl ="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg";
var raster = new Raster();
raster.scale(0.2)

【问题讨论】：

我会从这个开始：paperjs.org/tutorials/images/working-with-rasters（听起来你已经是了）。您是否已经将图片作为普通图片标签嵌入到页面上？
正如我在帖子中提到的，我有图片显示我是否这样做this.path = new Path(raster)...。您可以在我提供的链接中试用。我会添加一些代码，你可以复制粘贴试试。

标签： javascript html image vector-graphics paperjs

【解决方案1】：

如果您想用path 剪辑raster，您需要创建一个包含这两个对象的组，然后将group.clipped 属性设置为true。传递 raster 作为 path 构造函数的参数将不起作用。

在“主”循环中最容易做到这一点。

//--------------------- main ---------------------

var balls = [];

// ADD AN ARRAY TO HOLD SOME RASTERS

var rasters = [];
var raster = new Raster("http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg");
raster.scale(.05);
var numBalls = 18;
for (var i = 0; i < numBalls; i++) {
    var position = Point.random() * view.size;
    var vector = new Point({
        angle: 360 * Math.random(),
        length: Math.random() * 10
    });
    var radius = Math.random() * 60 + 60;
    balls.push(new Ball(radius, position, vector));

    // ADD RASTERS AND CLIP TO EACH "BALL"

    rasters.push(raster.clone().scale(radius/50));
    var group = new Group(balls[i].path, rasters[i]);
    group.clipped = true;
}
raster.remove();

function onFrame() {
    for (var i = 0; i < balls.length - 1; i++) {
        for (var j = i + 1; j < balls.length; j++) {
            balls[i].react(balls[j]);
        }
    }
    for (var i = 0, l = balls.length; i < l; i++) {
        balls[i].iterate();
        rasters[i].position = balls[i].path.position;
    }
}

【讨论】：