下部 canvas 的绘图模式以及如何在上部 canvas 而不是下部呈现控件

Question

我开始开发我的项目，其中 fabric js canvas 用作我的 3d 对象的纹理，由三个 js 库加载。不幸的是我现在没有完整的工作片段，也许你可以告诉我解决方案或解决我的问题的正确方法

问题是在下方 canvas 上绘制的控件及其在我的 3d 对象上的传输，我想在上方 canvas 上渲染它。可能吗？第二个问题是画笔首先在上部 canvas 上渲染，而在事件 'mouse: up' 之后它在下部 canvas 上渲染。 canvas画画时如何通过事件'mouse; move'渲染画笔线？

p.s。对不起我的英语，对我来说真的很难说。希望，你懂我的心意

在这里你可以看到我的第一期： https://1drv.ms/u/s!AqtIFlFVWz4MhNtBc3g1DQElfA6_7Q?e=y7ly37

感谢您的回复！

Answer 1

这是一个很难的问题，它并不是真正的 three.js 问题，它更多地与 fabric.js 和绘图 canvas 有关。 three.js 纹理化对象的部分似乎工作正常。

如果我理解正确的话，你有一个覆盖层 canvas，你想在其上渲染控件，但它们也被渲染到实际纹理 canvas？如果以防万一您实际上是在纹理上渲染控件；不要那样做 :p

应该可以让它按照你想要的方式工作。 post 关于 https://jsfiddle.net/ 或其他内容的小代码示例会很有帮助。

Answer 2

哇！这是一个非常好的代码示例！而且它也很流畅。它更好地显示了问题。

我在 fabric js 演示中找到了第一个问题（属于 three.js 问题）的解决方案：http://fabricjs.com/controls-customization。我不擅长面料，所以可能有比这更优雅的解决方案。您可以隐藏控件，渲染到 three.js，然后再次显示它们。您还必须强制 canvas 进行渲染，否则它将无法工作。

function animate() {
    requestAnimationFrame(animate);

    //find the selected object on the fabric canvas
    let selected = canvas.getActiveObject();

    //hide controles and render on the fabric canvas;
    if (selected){
        selected.hasControls = false;
        selected.hasBorders = false;
        canvas.renderAll();
    }

    //update texture and render
    texture.needsUpdate = true;
    renderer.render(scene, camera);

    //show controls and render on the fabric canvas
    if (selected){
        selected.hasControls = true;
        selected.hasBorders = true;
        canvas.renderAll();
    }    
}

第二个问题有点难理解。我不确定 'lower canvas' 是什么，它是否是我不理解的结构的一部分。这是我能得到的最接近的。我几乎让它在 three.js 渲染器上工作。如果我理解正确的话...

你需要有一个变量来知道你是否按下了鼠标。仅当您按下鼠标并移动鼠标时，它才会绘制一个圆圈。

要对织物 'mouse:move' 执行相同操作，您至少必须禁用织物 canvas 上的那个选择框。但我不知道它在织物中是如何工作的。

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var mouseDown = false;///////////////////////////// global boolean
var onClickPosition = new THREE.Vector2();



container.addEventListener("mousedown", function(){
    mouseDown = true;
    canvas.selection = false;
    onMouseEvt(); //draw circle
}, false);

container.addEventListener("mouseup", function(){
    mouseDown = false
    canvas.selection = true;
}, false);

container.addEventListener("mousemove", function(e){
    if (mouseDown){
    onMouseEvt(); //draw circle
    }
}, false);


///This code does not work, it goes into selection mode..
canvas.on('mouse:down', function(){
    mouseDown = true;
    addCircle(); 
}, false);

canvas.on('mouse:up', function(){
    mouseDown = false;
}, false);

canvas.on('mouse:move', function(){
    if ( mouseDown ){
        addCircle(); 
    }
}, false);

下部 canvas 的绘图模式以及如何在上部 canvas 而不是下部呈现控件

Drawing mode on lower canvas and how to render controls on upper canvas instead of lower

three.js

html5-canvas

fabricjs