Javascript 选择添加到kinetic.js中画布的任何动态形状
让我解释一下我做了什么。首先，我制作了一个舞台，然后在舞台上添加了与舞台大小相同的矩形。之后，我定义了一个函数，可以在鼠标按下事件中动态绘制矩形。在这之前，一切都正常，之后我需要的是，当我双击任何形状时，我无法更改该形状的颜色 让我们看看下面的代码-Javascript 选择添加到kinetic.js中画布的任何动态形状,javascript,canvas,kineticjs,Javascript,Canvas,Kineticjs,让我解释一下我做了什么。首先，我制作了一个舞台，然后在舞台上添加了与舞台大小相同的矩形。之后，我定义了一个函数，可以在鼠标按下事件中动态绘制矩形。在这之前，一切都正常，之后我需要的是，当我双击任何形状时，我无法更改该形状的颜色 让我们看看下面的代码- <!DOCTYPE html> <html> <head> <title>Drawing the custom shapes</title> &l
<!DOCTYPE html>
<html>
<head>
<title>Drawing the custom shapes</title>
<script src="kinetic-v4.6.0.min.js"></script>
<script defer="defer">
function Execute()
{
//Defining the stage
var stage= new Kinetic.Stage({
container:'container',
width:400,
height:400
});
//Adding a rectangle layer
var backLayer= new Kinetic.Rect({
x:0,
y:0,
width:stage.getWidth(),
height:stage.getHeight(),
fill:'black'
});
// Creating a layer
var layer= new Kinetic.Layer();
//Adding the background to it!
layer.add(backLayer);
stage.add(layer);
//============ADDING THE FUNCTIONALITY FOR THE RECTANGLE=================
//Defining the variables
var isMouseDown=false;
var refRect,refRect1;
var Enable=false;
var originX= new Array();
var originY=new Array()
backLayer.on('mousedown',function(){
onMouseDown();
});
backLayer.on('mousemove',function(){
onMouseMove();
});
backLayer.on('mouseup',function(){
onMouseUp();
});
//Defining the global variables
var initialX=10, initialY=10;
//Defining the functions
function onMouseDown()
{
//Code goes here
//Setting the mouse
isMouseDown=true;
//Getting the coordinates
var pointerPosition= stage.getPointerPosition();
//Reflush the array
originX=[];
originY=[];
originX.push(pointerPosition.x);
originY.push(pointerPosition.y);
//Creating the rectangle Shape
var rect= new Kinetic.Rect({
x:originX[0],
y:originY[0],
width:0,
height:0,
stroke:'white',
strokeWidth:4,
name:'Rectangle'
});
//Creating a copy of it!
refRect=rect;
refRect1=rect; //<<<<<<Recently created rectangle as active
rect.setListening(true);
// Adding to the layer
layer.add(rect);
Enable=false;
//stage.add(layer);
}
//<<<<<<<<<<<<<<CODE TO CHANGE THE COLOR OF THE SELECTED SHAPE
stage.on('dblclick',function(evt){
var selected1=evt.targetNode;
// var selected=evt.targetNode;
alert(selected1.setFill('red'));
});
function onMouseMove()
{
//Code goes here
if(!isMouseDown) // ie, is mouse pointer not down iff true than return
{
return;
};
var pointerPosition= stage.getPointerPosition();
refRect.setWidth(pointerPosition.x-refRect.getX());
refRect.setHeight(pointerPosition.y-refRect.getY());
layer.drawScene();
}
function onMouseUp()
{
isMouseDown=false;
stage.add(layer);
}
}
</script>
</head>
<body onload="Execute()">
<div id="container" style="width: 400px; height: 400px; border: 1px solid red"></div><br/>
<input type="button" id="fill" value="FILL">
</body>
</html>
绘制自定义形状
函数Execute（）
{
//定义阶段
var阶段=新的动力学阶段({
容器：'容器'，
宽度：400，
身高：400
});
//添加矩形层
var backLayer=新的动能.Rect({
x:0,，
y:0，
宽度：stage.getWidth（），
高度：stage.getHeight（），
填充：“黑色”
});
//创建图层
var layer=新的动能层（）；
//添加背景到它！
layer.add（backLayer）；
阶段。添加（层）；
//=============添加矩形的功能=================
//定义变量
var isMouseDown=错误；
var reflect，reflect1；
var Enable=false；
var originX=新数组（）；
var originY=新数组（）
backLayer.on（'mousedown'，function（））{
onMouseDown（）；
});
backLayer.on（'mousemove'，function（））{
onMouseMove（）；
});
backLayer.on（'mouseup'，function（）{
onMouseUp（）；
});
//定义全局变量
var initialX=10，initialY=10；
//定义功能
函数onMouseDown（）
{
//代码在这里
//设置鼠标
isMouseDown=真；
//获取坐标
var pointerPosition=stage.getPointerPosition（）；
//重新填充阵列
originX=[]；
原始=[]；
原始推力（指针位置x）；
原始推送（指针位置y）；
//创建矩形形状
var rect=新的动能.rect({
x:originX[0]，
y:原创[0]，
宽度：0，
高度:0,，
笔画：'白色'，
冲程宽度：4，
名称：“矩形”
});
//创建它的副本！
reflect=rect；
reflect1=rect；//在对舞台/层执行更改后，您需要使用draw（）
或drawsecene（）
功能，以便将其渲染到场景中
//<<<<<<<<<<<<<<CODE TO CHANGE THE COLOR OF THE SELECTED SHAPE
stage.on('dblclick',function(evt){
var selected1=evt.targetNode;
selected1.setFill('red');
stage.draw(); //or layer.draw();
});
//谢谢….projeqht.我真的很担心这个问题…yopu解决了它谢谢。别担心，别忘了console.log是你的朋友！如果有疑问，请使用console.log（evt.targetNode）；查看它的选择是否正确，并检查对象的属性：）