html 显示温度,温度计.html · BillGreen/dragWEB - Gitee.com

Title

* {

margin: 0;

padding: 0;

}

.container {

display: flex;

height: 100vh;

overflow: hidden;

}

.left-nav {

width: 270px;

background-color: #fff;

}

.right-container {

flex: 1;

background-color: #fff

}

var $ = go.GraphObject.make;

var dragContent = $(go.Diagram, "dragContent", {

"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,//缩放

"animationManager.duration": 800,

"undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo

allowDrop: true,

"grid.visible": true,//绘制网格

initialContentAlignment: go.Spot.Center,//图形在居中的位置开始绘制

})

var ORIGINAL_HEIGHT = 400;

dragContent.nodeTemplateMap.add("wenduji", $(go.Node, "Spot",

{

resizable: true,

resizeObjectName: "BarSpace",

locationObjectName: "Bulb",

locationSpot: go.Spot.Center

},

$(go.Shape,

{name: "BarSpace", width: 25, height: ORIGINAL_HEIGHT, strokeWidth: 0, fill: "rgba(0,0,0,.05)"},

new go.Binding("height").makeTwoWay()

),

// Farenheit scale, on the left:

$(go.Panel, "Graduated",

{

background: "white",

graduatedMin: -40, graduatedMax: 80,

graduatedTickBase: 0, graduatedTickUnit: 1,

alignment: go.Spot.BottomLeft,

alignmentFocus: go.Spot.BottomLeft,

alignmentFocusName: "line"

},

new go.Binding("graduatedMax", "", function (data) {

if (data.type === "scaling") return 80;

return (data.height * 0.3) - 40;

}),

$(go.Shape, {name: "line", geometryString: "M0 0 V-" + ORIGINAL_HEIGHT, stroke: "gray"},

new go.Binding("height")),

$(go.Shape, {alignmentFocus: go.Spot.Bottom, interval: 2, strokeWidth: 1, geometryString: "M0 0 V15"}),

$(go.Shape, {alignmentFocus: go.Spot.Bottom, interval: 10, strokeWidth: 2, geometryString: "M0 0 V20"}),

$(go.TextBlock, {interval: 20, font: "22px Georgia", alignmentFocus: new go.Spot(1, 0.5, 20, 0)}),

// Mark 32 degrees on the farenheit scale:

$(go.TextBlock, {

interval: 32, graduatedFunction: function (n) {

return n === 32 ? "32—" : ""

},

font: "bold 12px Georgia", stroke: "red", alignmentFocus: new go.Spot(1, 0.5, 20, 0)

})

),

// Mercury bar, which represents the values of farenheit and celsius

$(go.Shape,

{

width: 25, strokeWidth: 0, fill: "red",

alignment: go.Spot.Bottom,

alignmentFocus: go.Spot.Bottom,

},

new go.Binding('fill', 'type', function (t) {

return t === "scaling" ? "lightcoral" : "red"

}),

// To determine the mercury level, look at both data.farenheit and data.celsius, but prefer celsius

new go.Binding("height", "", function (data) {

var thermometerHeight = ORIGINAL_HEIGHT;

if (data.type === "scaling") thermometerHeight = data.height;

if (data.celsius !== undefined) {

// (celsius + minimum value) / (total celsius range) * height

return Math.max(0, ((data.celsius + 40) / 67) * thermometerHeight);

} else if (data.farenheit !== undefined) {

// (farenheit + minimum value) / (total farenheit range) * height

return Math.max(0, ((data.farenheit + 40) / 120) * thermometerHeight);

} else {

return 0;

}

}

),

new go.Binding("maxSize", "height", function (h) {

return new go.Size(NaN, h)

})

),

// Celsius scale, on the right:

$(go.Panel, "Graduated",

{

background: "white",

// -40 to 27 because we picked -40 to 80 for farenheit, and want them to line up

graduatedMin: -40, graduatedMax: 27,

graduatedTickBase: 0, graduatedTickUnit: 1,

alignment: go.Spot.BottomRight,

alignmentFocus: go.Spot.BottomRight,

alignmentFocusName: "line2"

},

new go.Binding("graduatedMax", "", function (data) {

if (data.type === "scaling") return 80;

return (data.height * 0.1675) - 40;

}),

$(go.Shape, {name: "line2", geometryString: "M0 0 V-" + ORIGINAL_HEIGHT, stroke: "gray"},

new go.Binding("height")),

$(go.Shape, {interval: 2, strokeWidth: 1, geometryString: "M0 0 V15"}),

$(go.Shape, {interval: 10, strokeWidth: 2, geometryString: "M0 0 V20"}),

$(go.TextBlock, {

interval: 20, textAlign: "left", font: "22px Georgia",

alignmentFocus: go.Spot.Left, segmentOffset: new go.Point(0, 22)

})

),

// Cosmetic: The stem and bulb

$(go.Shape,

{

width: 25, height: 10, strokeWidth: 0, fill: "red",

alignment: go.Spot.Bottom

},

new go.Binding('fill', 'type', function (t) {

return t === "scaling" ? "lightcoral" : "red"

})

),

$(go.Shape, "Circle",

{

name: "Bulb",

width: 55, height: 55, strokeWidth: 0, fill: "red",

alignment: go.Spot.Bottom,

alignmentFocus: go.Spot.Top,

},

new go.Binding('fill', 'type', function (t) {

return t === "scaling" ? "lightcoral" : "red"

})

)

) // end node template

)

var dragPalette = $(go.Palette, "dragNav", {

"animationManager.duration": 800,

initialContentAlignment: go.Spot.Center,

nodeTemplateMap: dragContent.nodeTemplateMap,

initialScale:0.1

})

var model = $(go.GraphLinksModel)

model.nodeDataArray = [

{category: "wenduji", name: "as", height: 800, celsius: 40},

]

dragPalette.model = model;

function save() {

var json = dragContent.model.toJson();

console.log(json)

// dragContent.isModified = false;

}

// dragPalette.addBehavior('')

一键复制

编辑

Web IDE

原始数据

按行查看

历史