createjs相关笔记

Posted 2023-04-04

参考技术A hitTest

元件.hitTest(x, y)用来检测元件和某个点是否发生碰撞。非常方便的是如果是png透明图，透明部分是不会检测到碰撞的。这个方法的参数x,y是相对坐标（相对于元件中心0，0的位置）。

globalToLocal

这也是一个有用的方法，虽然需求中我没用到。用法是元件.globalToLocal(x, y)，表示将一个全局坐标转化为现对于元件位置的坐标。

localTolocal

好了，这个是最有用的。将一个元件的绝对坐标（相对于画布左上角）转化为相对元件的坐标（相对于元件的中心点x,y）。
用法是 元件1.localTolocal(x, y, 元件2)。返回的是元件1相对于元件2中心点的坐标，参数x,y表示元件1的有效碰撞点，这里只能是一个点去碰一个图形，至于如何解决图形间的边缘碰撞，我目前是在碰撞源上设置多个碰撞点，去做多次检测。待深入研究。

如何使用 createjs 为图像应用渐变颜色？

【中文标题】如何使用 createjs 为图像应用渐变颜色？

【英文标题】：How to apply gradient color for an image using createjs?

【发布时间】：2019-05-28 12:51:14

【问题描述】：

如何使用 createjs 应用渐变填充？下面是创建加载图像的代码，我已经使用滤色器更改了颜色，但我想应用渐变颜色

 let rightContainer = new createjs.Container();
                let rightMain = new window.createjs.Bitmap(rightImage);
                // leftMain.scaleX = 800 / leftMain.image.width;
                rightMain.scaleY = 800 / rightMain.image.height;
                rightContainer.addChild(rightMain);
                rightMain.x = 300;
                rightMain.y = 0;
                this.layerImage = rightMain.clone();
                this.layerImage.alpha = 0.15;
                rightContainer.addChild(this.layerImage);
                rightMain.filters = [new window.createjs.ColorFilter(0, 0, 0, 1, 117, 111, 115, 0)];
                rightContainer.main = rightMain;
                rightMain.cache(0, 0, rightMain.image.width, rightMain.image.height);
                rightContainer.visible = false;
                this.stage.addChild(rightContainer);

【参考方案1】：

你到底想做什么？在经过颜色过滤的图像上应用渐变？

您可以使用的方法是：

画一个带有渐变的盒子 缓存它，以便它可以用作 AlphaMaskFilter 将其作为过滤器应用于位图 缓存位图以应用过滤器。

我做了一个演示来展示它是如何工作的： https://jsfiddle.net/lannymcnie/uog3hkpd/2/

// Draw a gradient in a shape:
s.graphics.lf(["#000", "rgba(0,0,0,0)"], [0, 0], 0,0,960,0);

// Cache the shape
s.cache(0,0,960,400);

// Add the alphamaskfilter + a color adjustment for fun
var col = new createjs.ColorMatrix().adjustHue(180);
bmp.filters = [
    new createjs.AlphaMaskFilter(s.cacheCanvas), 
    new createjs.ColorMatrixFilter(col)
];

// Cache it to apply filters
bmp.cache(0,0,960,400);

演示做了一些其他的事情，比如

在下面添加第二个未过滤的 bmp 对渐变比例进行动画处理（需要重新缓存）

希望对您的问题有所帮助。如果您有任何需要帮助的具体代码或示例，请随时澄清。

干杯，