来自多个html按钮的一个javascript函数
奇怪的问题,但我有一个在画布上绘制的javascript函数。我在HTML上创建了使用该函数的按钮。我有多个带有不同图像源的按钮,我想用于一个功能,而无需多次重复该功能,只需更改imgsrc。我试着给按钮ID,但你不应该有多个ID。我试着使用类,但似乎不起作用。使用AngularJS HTML来自多个html按钮的一个javascript函数,javascript,html,angularjs,Javascript,Html,Angularjs,奇怪的问题,但我有一个在画布上绘制的javascript函数。我在HTML上创建了使用该函数的按钮。我有多个带有不同图像源的按钮,我想用于一个功能,而无需多次重复该功能,只需更改imgsrc。我试着给按钮ID,但你不应该有多个ID。我试着使用类,但似乎不起作用。使用AngularJS HTML 我建议您在按钮上创建自定义指令来处理单击事件,因为它是重复的任务。您可以添加自定义属性,如“数据img路径”,而不是使用隐藏变量来传递图像路径 例如: 这里的“数据加载化身”是一个自定义指令,您可以在
我建议您在按钮上创建自定义指令来处理单击事件,因为它是重复的任务。您可以添加自定义属性,如“数据img路径”,而不是使用隐藏变量来传递图像路径 例如:
这里的“数据加载化身”是一个自定义指令,您可以在其中添加单击事件并读取属性“数据图像路径”,并在加载画布中使用该图像路径。这样,您的代码也将是干净的和可维护的。好吧,当使用这些自定义指令时,如何在javascript函数中调用它们?在指令中,您可以添加click事件并读取图像路径并加载它。
<md-button onclick="(new avatarCanvas()).body()" style="border: 3px solid black;"><input class="image" value="www.website.com/image1.png" type="hidden"></md-button>
<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image2.png" type="hidden"></md-button>
<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image3.png" type="hidden"></md-button>
<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image4.png" type="hidden"></md-button>
<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image5.png" type="hidden"></md-button>
var canvas1 = document.getElementById('layer1');
var ctx1 = canvas1.getContext('2d');
var canvas2 = document.getElementById('layer2');
var ctx2 = canvas2.getContext('2d');
var imageObj = new Image();
this.body = function() {
imageObj.onload = function() {
ctx1.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
};
imageObj.src = document.getElementsByClassName("image").value;
}
this.hair = function() {
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
imageObj.onload = function() {
ctx2.drawImage(imageObj, 64.43, 7, imageObj.width, imageObj.height);
};
imageObj.src = document.getElementsByClassName("hair").value;
}
<md-button data-load-avatar style="border: 3px solid black;" data-image-path="www.website.com/image1.png" />