时间戳

首页 > 解决方案 > 下画布上的绘图模式以及如何在上画布而不是下画布上呈现控件

three.js - 下画布上的绘图模式以及如何在上画布而不是下画布上呈现控件

问题描述

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

问题是在下部画布上绘制的控件及其在我的 3d 对象上的传输，我想在上部画布上渲染它。是否可以？第二个问题是画笔首先呈现在上部画布上，然后在事件“鼠标：向上”后呈现在下部画布上。如何通过事件“鼠标”渲染画笔线；此刻在下方画布上移动'？

ps对不起我的英语，对我来说真的很难说。希望你明白我的想法

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

谢谢你的回复！

标签： three.jshtml5-canvasfabricjs

解决方案

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

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

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();
    }    
}

第二个问题有点难以理解。我不确定“下部帆布”是什么，以及它是否是我不理解的织物的一部分。这是我能得到的最接近的。我几乎让它在 three.js 渲染器上工作。如果我正确理解了这个想法......

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

要对织物“鼠标：移动”执行相同操作，您至少必须禁用织物画布上的选择框。但我不知道这在织物中是如何工作的。

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);

推荐阅读