머리말

그러한 그의 주요 작업 강전 구동 특성 등등 엘리베이터, 펌프, 팬, 에어컨, 같은 빌딩 자동화 건물 전기 기기를 의미한다. 종종 이러한 장치는 개방형 근무 조건, 닫힌 루프를 형성하지 않았다이다. 만큼 전원 등 근로 조건, 프로세스, 에너지 소비로, 직장에서 장치를 켜지로, 말할 것도없고, 적시에 온라인으로 에너지의 합리적인 이용과 보존을 데이터를 가져올 수 없습니다. 해당 센서, 리미트 스위치, 광전 제어를 설정하여 전기 장치의 상기 현재 구축 자동화 라인 모니터링, 기기의 작동 상태를 검출하고, 중심선 통하여 제어실 컴퓨터를 반환하고, 그 결과의 컴퓨터 분석에서 얻은 다음 터미널은 조정 장치로 돌아갑니다.

(특정 효과 링크를 참조하십시오 : http://www.hightopo.com/demo/building-automation-system/ )

코드 구현

첫 번째 단계는 우리는 여전히 전체 인터페이스 설정의 기초를 할 필요가 :

gv.getSelectWidth는 = () => {리턴 // 0} 숨기 선택된 프레임 
gv.setMovableFunc (() => {반환 거짓}) // 금지으로 이동 프리미티브 
gv.handleScroll = () => {} // 마우스 금지 스케일링 
gv.handlePinch = () => {} // 터치 핀치 크게 금지 
병진 금지 // (FALSE)을 gv.setPannable 
gv.setRectSelectable을 (FALSE) // 금지 Kuangxuan 
gv.setScrollBarVisible (FALSE) 스크롤을 숨길 // 기사 
window.document.oncontextmenu는 = () => {반환 거짓} // 비활성화 상황에 맞는 메뉴 전역 설정

그런 다음 각이 간단하고, 이러한 동적 효과를 포함하고, 내가 보여주기 위해 몇 가지 예를 사용하여 구현하는 방식에 유사한 시스템 전체의 움직임의 감각을 나타낼 수 애니메이션, 패널을 포장하기 시작했다 :

함수 chillerPanelAnim는 () { 
　　하자 NUM = [] 
　　있도록 N = [] 
　　(하자 I = 0; I는 <10; I ++)에 대해 { 
　　　　{(I 8 <) 경우 
　　　　　　num.push를 (인 Math.random () * 2) 
　　　　} 
　　　　다른 경우 (I === 8) { 
　　　　　　n.push (인 Math.random () * 40 + 60) 
　　　　} 
　　　　다른 { 
　　　　　　n.push (인 Math.random () * 31) 
　　　　} 
　　} 
　　oldNumValue1 chillerPanel.a = ( 'L1하자. l.clipPercentage ') 
　　oldNumValue2 = chillerPanel.a (하자' ') l2.l.clipPercentage를 
　　'l3.l.clipPercentage oldNumValue3 = chillerPanel.a를 (하자 ') 
　　ht.Default.startAnim ({ 
　　　　기간 : 2000, 
　　　　완화 : (t ) => {복귀 t}, 
　　　　동작 (V, t) => {
　　　　　　chillerPanel.a ( 'l1.l.clipPercentage'oldNumValue1 + (NUM [0] - oldNumValue1) * V) 
　　　　　　chillerPanel.a ( 'l2.l.clipPercentage'oldNumValue2 + (NUM [1] - oldNumValue2) * V) 
　　　　　　chillerPanel.a ( 'l3.l.clipPercentage'oldNumValue3 + (NUM [2] - oldNumValue3) * V) 
　　　　} 
　　　　finishFunc () => { 
　　　　　　에서는 setTimeout (() => { 
　　　　　　　　chillerPanelAnim () 
　　　　　　}, 2000) 
　　　　} 
　　} ) 
}

애니메이션 방식에 대해 우리는 점차적으로 목표 값에, HT가 ht.Default.startAnim을 제공, 프레임 기반 및 시간 기반 애니메이션은 내가 사용하는 두 가지 방법으로 지원하는 과정에 의해 일부 속성의 시작 값으로 이해 될 수있다 그 몇 밀리 애니메이션 사이클의 지속 기간을 지정하는 시간 기반 모드는 상기 HT 애니메이션 지정된 기간 내에 완료한다, 즉 프레임의 수 또는 함수 액션 호출 횟수는 일반적으로 시스템 환경에 따라 유리한 더 나은 기계 시스템 구성,보다 효율적인 브라우저는 애니메이션 과정 부드럽고, 더 많은 프레임을 호출됩니다. 그것은 정확하게 간격 시간 간격을 제어 할 수 없습니다 JS 언어를 방지, 애니메이션은 매우 다른 질문 기간을 나타날 수 있습니다. 이 완화되는 특성이 수학 공식에 의해 계산 될 수있는 애니메이션 구성하려면 여유 효과를 , 관심 친구 시도하고 재생할 자신을 열 수 있습니다.

파이프 섹션 2.5D 장비, 나에 대해 얘기 할 수있는 방법을 계획 :

// 流动动画
let flowTask = {
　　interval: 10,
    action: (data) => {
        if (data.getDisplayName() === 'flow1') {
            data.s('shape.dash.offset', data.s('shape.dash.offset') + 1)
        }
        if (data.getDisplayName() === 'flow2') {
            data.s('shape.dash.offset', data.s('shape.dash.offset') - 1)
        }
        if (data.getDisplayName() === 'flow3') {
            data.s('shape.dash.offset', data.s('shape.dash.offset') + 5)
        }
    }
}

dm.addScheduleTask(flowTask)

这也是一种实现动效的方式，它主要用于在指定的时间间隔进行函数回调处理，常用于实现图形的流动和闪烁等动画效果。流程是先通过 DataModel 添加调度任务，DataModel 会在调度任务指定的时间间隔到达时，遍历所有图元回调调度任务的 action 函数，可在该函数中传入的 Data 图元做相应的属性修改以达到动画效果。更多参数和设置可以参考调度手册。

我们还要注意最好给需要交互的图元的鼠标移入移出事件分别设置 view.setCursor('pointer') 和 view.setCursor('default') 来增强交互体验感。同时，制作 2.5D 的图元其实需要花费超出正常 2D 图元数倍的工作量，除了要按照真实角度的透视图去建模外，还需要把每个部分单独制作。这就出现了有可能卡顿的问题，我们做的时候要注意用缓存规则来优化性能，尽可能的把每个细节做好。cacheRule 就相当于都用同一个 image，默认规则时：图标名 + 宽 + 高 + 缩放，如果规则判定一致，就会用同一张贴图，如果有其他的需要影响，就多返回一些信息，例如 data.a( 'color' )，这样会额外判定他们这个属性也是否一致，只有都一致的才会用同一张缓存，不一致的话尝试新建缓存贴图，比较适合静态的。

总结

21 세기에 비약적으로 컴퓨터 기술과 정보 기술의 개발. 건물의 각종 장비의 상태 모니터링 및 측정 대신 스캔 측정을 사용하는 와이어와 함께 더 이상 없습니다. 지능형 빌딩 (지능형 빌딩)이 조합의 기술과 인터넷 기술 제품을 구축하는 것은 정보 사회와 국제 경제의 필요성이다. 오늘 우리는 빌딩 자동화 제어 시스템 클래스에 속하는 (BAS) 및 통신 자동화 시스템 (CAS) 및 사무 자동화 시스템 (OAS) 및 기타 구성 요소를 구축 할 수 있습니다. 이제 널리 크게 운영 체제 중 하나로서 유효 활용 및 관리 효율성과 에너지 모니터링 장비 및 기타 정보의 증가, 다양한 분야에서 사용된다. 우리는 정보 기술의 사회 발전을 촉진하기 위해 운영 체제 키가 대기에 더 지능이 있습니다!

웹을위한 HT :( http://www.hightopo.com/demos/cn-index.html )

실현 HTML5 + 캔버스를 기반으로 빌딩 자동화 시스템

머리말

코드 구현

总结

추천