小编bar*_*tzy的帖子

我试图让用户通过在画布上绘制半透明线条的"绘画"工具在其上绘画来指定区域.其目的是为将在画布下方绘制的图像指定"蒙版".

这是我到目前为止所尝试的:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvasPos = canvas.getBoundingClientRect();

var dragging = false;

drawImage();

$(canvas).mousedown(mouseDown);
$(canvas).mouseup(mouseUp);
$(canvas).mousemove(mouseMove);

function drawImage() {
    var img = new Image();
    img.src = 'http://img2.timeinc.net/health/img/web/2013/03/slides/cat-allergies-400x400.jpg';

    img.onload = function () {
        ctx.drawImage(img, 0, 0);
    };
}

function mouseDown(e) {
    var pos = getCursorPosition(e);

    dragging = true;

    ctx.strokeStyle = 'rgba(0, 100, 0, 0.25)';
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.lineWidth = 15;
    ctx.beginPath();
    ctx.moveTo(pos.x, pos.y);
}

function mouseUp(e) {
    dragging = false;
}

function …

我正在尝试在 React Native 中创建一个带有 2 个选项卡（使用react-native-tab-view）的屏幕，布局如下：

 ------------------------
|   Collapsible Header   |
|------------------------|  
|    Tab A  |  Tab B     |
|------------------------| 
|                        |
|                        |
|        FlatList        |
|         in Tab         |
|         Content        |
|                        |
|                        |
|                        |
|                        |
 ------------------------

我选择的布局是可折叠标题和选项卡栏的绝对定位，并且 FlatList 实际上覆盖了整个屏幕（标题和选项卡栏都位于其顶部）。为了将可滚动部分放在选项卡栏之后，我paddingTop在contentContainerStyleFlatList 的 中添加了 。这是问题的根源 - 当在选项卡 A 中滚动，然后移动到选项卡 B 时，由于填充，将会出现空白。

我创建了一个完整的 Expo 项目来展示这个问题：https://expo.io/@bartzy/collapsible-tab-view-example 这是 Expo 项目的 Github 存储库：https://github.com/bartzy/CollapsibleTabViewExample

这是示例应用程序的快速视频，显示切换到选项卡 2 后的空白填充空间：

我很感激有关如何在选项卡之间移动时消除空白空间，同时保持所需的折叠行为的任何想法。