Javascript html画布中的等距立方体投影
如何在画布2d中创建等轴测立方体？我一直都在想办法得到立方体的顶部，但是你是怎么做到左右两边的呢 注意：我希望使用Kinetic.js对象时，其事件处理功能保持不变 这就是我现在拥有的：Javascript html画布中的等距立方体投影,javascript,html,isometric,Javascript,Html,Isometric,如何在画布2d中创建等轴测立方体？我一直都在想办法得到立方体的顶部，但是你是怎么做到左右两边的呢 注意：我希望使用Kinetic.js对象时，其事件处理功能保持不变 这就是我现在拥有的： <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } canvas { b
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 200,
//scale: [1, 0.5],
//scale: [1, 0.86062],
//rotation: -30 * Math.PI /180,
});
var layer = new Kinetic.Layer({
scale: [1,0.5],
});
var foo = false;
layer.beforeDraw(function(){
if (!foo) {
var context = this.getContext();
var sx = 45*Math.PI/180;
// .75 horizontal shear
var sy = 0;
// no vertical shear
// apply custom transform
//context.transform(1, sy, sx, 1, 0, 0);
//context.scale(1, 0.5);
//context.rotate(45 * Math.PI /180);
//var angle = 30;
//context.setTransform(1, Math.tan(30), 0, 1, 0, 0);
}
foo = true;
});
layer.afterDraw(function(){
var context = this.getContext();
//context.scale(1, 2);
//context.rotate(-45 * Math.PI /180);
});
var rect = new Kinetic.Rect({
x: 200,
y: 100,
width: 50,
height: 50,
fill: "blue",
stroke: "black",
strokeWidth: 4,
rotation: -45 * Math.PI /180,
//scale: [1, 0.5],
});
rect.on("mouseover", function() {
//alert(this.getFill());
this.setFill("red");
layer.draw();
});
rect.on("mouseout", function() {
//alert(this.getFill());
this.setFill("blue");
layer.draw();
});
// add the shape to the layer
layer.add(rect);
// add the layer to the stage
stage.add(layer);
};
</script>
演示：可能改用多边形？这里有一个例子
我把三个部分分开，但我想你可以把它作为一个策略来做。位置和大小需要一些调整…也许可以使用多边形来代替？这里有一个例子 我把三个部分分开，但我想你可以把它作为一个策略来做。位置和大小需要一些调整，虽然