将点击事件从一个画布发送到另一个画布 [英] Emit click events from one canvas to another
问题描述
我正在使用Threejs画布渲染3d模型，并使用另一个(隐藏的)Fabricjs画布作为纹理应用.
I'm using a Threejs canvas to render a 3d model and another (this one hidden) Fabricjs canvas to apply as a texture.
我实现了将3d坐标从threejs画布转换为2d画布的功能.现在，我需要按照
I achieved to transform the 3d coords from the threejs canvas to the 2d canvas. Now what i need is to "replicate" or "emit" the click and drag events from the 3d canvas to the hidden 2d one as suggested in a comment from this question.
我用进度条做了一个码笔.如果单击左画布，则将在相同的坐标中生成一个点，但会在2d画布中生成一个点. 我需要能够直接从左侧threejs画布中单击并拖动画布对象.
I made a codepen with my progres. If you click the left canvas a dot will spawn in the same coords but in 2d canvas. I need to be able to click and drag the canvas objects directly from the left threejs canvas.
查看我制作的密码笔 Codepen
<div id="c-left">
<h3>Renderer</h3>
<div id="renderer"></div>
</div>
<div id="c-right">
<h3>Canvas</h3>
<canvas id="canvas" width="512" height="512"></canvas>
</div>
<script>
console.clear();
console.log("starting scripts...");
/**
* Fabricjs
* @type {fabric}
*/
var canvas = new fabric.Canvas( "canvas" );
canvas.backgroundColor = "#FFBE9F";
var rectangle = new fabric.Rect( {
top: 100,
left: 100,
fill: '#FF6E27',
width: 100,
height: 100,
transparentCorners: false,
centeredScaling: true,
borderColor: 'black',
cornerColor: 'black',
corcerStrokeColor: 'black'
} );
canvas.add( rectangle );
/**
* Threejs
*/
var containerHeight = "512";
var containerWidth = "512";
var camera, renderer, container, scene, texture, material, geometry,
cube;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var onClickPosition = new THREE.Vector2();
init();
animate();
/**
* Configurator init function
*/
function init() {
/**
* Camera
*/
camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 0.01, 100 );
camera.position.set( 0, 0, 3.5 );
/**
* Renderer
*/
container = document.getElementById( "renderer" );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( containerWidth, containerHeight );
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
container.appendChild( renderer.domElement );
/**
* Scene
*/
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
/**
* Texture and material
*/
texture = new THREE.Texture( document.getElementById( "canvas" ) );
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
material = new THREE.MeshBasicMaterial( { map: texture } );
/**
* Model
*/
geometry = new THREE.BoxGeometry( 1, 1, 1 );
cube = new THREE.Mesh( geometry, material );
scene.add( cube );
}
/**
* Configurator frame render function
*/
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.004;
cube.rotation.y += 0.001;
texture.needsUpdate = true;
renderer.render( scene, camera );
}
/**
* Listeners
*/
container.addEventListener( "mousedown", onMouseClick, false );
/**
* Other methods
*/
function onMouseClick( evt ) {
evt.preventDefault();
var array = getMousePosition( container, evt.clientX, evt.clientY );
onClickPosition.fromArray( array );
var intersects = getIntersects( onClickPosition, scene.children );
if ( intersects.length > 0 && intersects[ 0 ].uv ) {
var uv = intersects[ 0 ].uv;
intersects[ 0 ].object.material.map.transformUv( uv );
var circle = new fabric.Circle({
radius: 3,
left: getRealPosition( "x", uv.x ),
top: getRealPosition( "y", uv.y ),
fill: 'red'
});
canvas.add( circle );
}
}
function getRealPosition( axis, value ) {
let CORRECTION_VALUE = axis === "x"
? 4.5
: 5.5;
return Math.round( value * 512 ) - CORRECTION_VALUE;
}
var getMousePosition = function ( dom, x, y ) {
var rect = dom.getBoundingClientRect();
return [ ( x - rect.left ) / rect.width, ( y - rect.top ) / rect.height ];
};
var getIntersects = function ( point, objects ) {
mouse.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1 );
raycaster.setFromCamera( mouse, camera );
return raycaster.intersectObjects( objects );
};
</script>
推荐答案
您需要使用element.dispatchEvent.
You need to use element.dispatchEvent.
您创建一个新事件:
var evt2 = new Event('mousedown', { clientX: value, clientY: value2 });
您发现值和value2从圆的顶部和左侧开始，并将在canvas._offset
You find value and value2 starting from the circle top and left and adding the values for x and y you find in canvas._offset
此时，您的evt2具有正确的值，您可以使用
At that point you have an evt2 with the right values, and you can use
canvas.upperCanvasEl.dispatchEvent(evt2);
这篇关于将点击事件从一个画布发送到另一个画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
