小编gol*_*nge的帖子

我有带有矩形透明孔的叠加图像。下面是可缩放且可拖动的图像。如何只剪切图像的可见部分？

如何确定透明矩形的大小和位置？是否可以仅在覆盖图像上进行逐像素 alpha 通道搜索？

还有其他想法吗？

编辑：

另一个引用的问题的解决方案是有用的，尽管它仅适用于整个画布，而不适用于背景、覆盖或添加的图像或形状等单个项目。是否可以读取单个织物元素上的像素值？

我使用覆盖图像作为外部 png 文件。

我正在使用 CRA2 来构建我的项目。有一些地方有 css import，比如

import 'common.css'

或库 CSS，例如

import 'librabry/dist/lib.min.css'

我希望它们作为内联标签包含在内，而不是创建 css 文件，并且对于 WebTool Audit，它们是渲染阻止样式表。

如何导入样式表文件并将其作为内联标记使用 create React app 移动？

我在调整图像大小时遇到​​问题。我想调整图像大小但不保持比例。当我使用 setHeight() 时，它给了我错误的值。

image.setHeight(100);
image.getHeight(); // gives me 140px output

当我使用缩放功能时，一切都是正确的，但它也保持图像比例

image.scaleToHeight(100);
image.getHeight(); // correct 100px output

这个测试还给了我奇怪的值：

console.log("h: " + image.getHeight()); // 348.25870646766174
image.set({ height : image.getHeight()-10 });
console.log("h: " + image.getHeight()); // 235.6030791317047

编辑：

更多代码：

var flatImage = document.getElementById("flat-image");

var canvas = new fabric.Canvas("frame-canvas",{                         
        width: 992,
        height: 450
});

var image = new fabric.Image(flatImage, {});
    image.selectable = false;
    // image.scaleToWidth( 250 );

canvas.add(image);
canvas.centerObject(image);
canvas.renderAll();

console.log("h: " + image.getHeight()); // 334
image.set({ height : image.getHeight()-10 });
console.log("h: " …

我正在尝试使用简单的快速服务器运行 SSR React (16.3.0) 应用程序。构建并运行后babel-node server.js出现有关导入 PNG 文件的错误：

/home/dev/test/src/assets/bg.png:1\n(function (exports, require, module, __filename, __dirname) { \xef\xbf\xbdPNG\n ^

SyntaxError: Invalid or unexpected token\n    at createScript (vm.js:80:10)\n    at Object.runInThisContext (vm.js:139:10)\n    at Module._compile (module.js:617:28)\n    at Module._extensions..js (module.js:664:10)\n    at Object.newLoader [as .js] (/home/dev/test/node_modules/pirates/lib/index.js:88:7)\n    at Module.load (module.js:566:32)\n    at tryModuleLoad (module.js:506:12)\n    at Function.Module._load (module.js:498:3)\n    at Module.require (module.js:597:17)\n    at require (internal/module.js:11:18)\n

这是我的 server.js：

import express from \'express\'\nimport React from \'react\'\nimport ReactDOMServer from \'react-dom/server\'\nimport path from \'path\'\n\nimport App from \'./src/components/App\'\n\nconst app = …

我有通过CSS3动画的元素列表,如下所示:

.anim-slide-left {
    animation: anim-slide-left 0.8s ease forwards;
    -webkit-animation: anim-slide-left 0.8s ease forwards;

}
@-webkit-keyframes anim-slide-left {
    0% {
        transform: translateX(-500px);
        -webkit-transform: translateX(-500px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}

/* there are more, but very similar */

加载页面时,js应仅为具有特殊类'animate'的可见元素设置动画:

$(function() {

    var $window = $(window);
    var $toAnimate = $('.animate');
    animate();

        // check if element is on the viewport
    function isElementVisible(elementToBeChecked)
    {
        var TopView = $(window).scrollTop();
        var BotView = TopView + $(window).height();
        var TopElement = …