HTML5 Canvas를 기반으로 한 쇼핑몰 모니터링 사례에 대한 자세한 설명

국내 경제가 급속히 발전함에 따라 사람들의 안전에 대한 요구도 점점 높아지고 있습니다. 다음과 같은 상황이 발생하지 않도록 방지하기 위해서는 보안 시스템 설치를 고려해야 합니다. 증거 및 단서 제공: 많은 공장, 은행, 도난 또는 사고에서 관련 기관은 비디오 정보를 기반으로 사건을 감지할 수 있으며 이는 매우 중요합니다. 단서. 분쟁이나 사고도 일부 발생하는데, 관련 담당자의 책임은 영상녹화를 통해 쉽게 알 수 있다. 높은 민방위 비용: 오늘날 많은 곳에서는 보안요원을 고용하는 것을 생각합니다. 각 보안요원의 비용은 월 800이고 하루 3교대 근무에 비해 연간 40,000위안 정도가 필요합니다. 전자 보안 장비의 가격이 저렴하지 않으며, 몇 년 내에 전자 보안 장비를 교체할 필요성도 적습니다. 따라서 민방위 비용은 상대적으로 높습니다. 민방위 지원: 대부분의 경우 안전을 보장하기 위해 전적으로 사람에게 의존하는 것은 매우 어렵습니다. 많은 경우 전자 보안 장비(예: 모니터 및 경보)의 지원이 더 완벽해야 합니다. 특별한 경우에 사용해야 합니다. 일부 가혹한 조건(고열, 추위, 폐쇄 등)에서 사람들이 육안으로 명확하게 관찰하기 어렵거나 환경이 단순히 사람들이 머물기에 적합하지 않기 때문에 전자 보안 장비를 사용해야 합니다. 은폐: 전자 보안 장비를 사용하면 일반 사람들은 항상 감시를 받고 있다는 느낌을 받지 못하고 은폐됩니다. 24시간 보안 보장: 24시간 중단 없는 보안 요구 사항을 충족하려면 전자 장비를 고려해야 합니다. 원격 모니터링: 컴퓨터 기술과 네트워크 기술의 발달로 원격 모니터링과 다양한 장소의 이미지 보기가 가능해졌습니다. 이제 많은 기업 리더들이 인터넷을 통해 전 세계 모든 지점의 상황을 실시간으로 관찰할 수 있게 되었습니다. 적시에 상황을 이해하는 것. 영상 보존: 디지털 영상 기술의 발달로 영상을 컴퓨터의 디지털 저장장치를 통해 저장할 수 있게 되면서 보다 오랜 기간 동안 보다 선명한 영상으로 저장할 수 있게 되었습니다. 생산 관리: 관리자는 적시에 직관적인 방식으로 생산 최전선의 상황을 이해할 수 있으므로 명령 및 관리가 용이해집니다.

중국의 모니터링 시스템에 대한 수요가 크다는 점을 고려하여 오늘은 모니터링 시스템의 프런트 엔드 부분을 만드는 방법을 소개하겠습니다.

http://www.hightopo.com/demo/metro/demo2.html 페이지에 들어가서 검사 요소를 마우스 오른쪽 버튼으로 클릭하면 예제 소스 코드를 볼 수 있습니다.

이 예의 동적 효과는 다음과 같습니다.

먼저 기본 장면을 빌드해 보겠습니다. HT에서 외부 장면을 내부로 가져오는 가장 일반적인 방법은 JSON 파일을 구문 분석하는 것입니다. JSON을 사용합니다. 다음으로 HT는 ht.Default.xhrLoad 함수를 사용하여 JSON 장면을 로드하고, HT 캡슐화된 DataModel.deserialize(json)를 사용하여 이를 역직렬화하고 역직렬화된 개체를 DataModel에 추가합니다.

 ht.Default.xhrLoad('demo2.json', function(text) { var json = ht.Default.parse(text); if(json.title) document.title = json.title;//JSON 파일 제목 변경 전역 변수 titleile에 할당됩니다. dataModel.deserialize(json);//Deserialize graphView.fitContent(true);//번역 토폴로지를 확대하여 모든 그래픽 요소를 표시합니다. 즉, 모든 요소를 ​​표시합니다});

HT에서는 데이터 유형 객체가 생성되면 내부적으로 id 속성이 자동으로 할당됩니다. 이 속성은 data.getId() 및 data.setId(id)를 통해 얻고 설정할 수 있습니다. id 값은 수정할 수 없습니다. Data 객체가 DataModel에 추가된 후 dataModel.getDataById(id)를 사용하여 Data 객체를 빠르게 찾을 수 있습니다. 일반적으로 HT에 의해 id 속성이 자동으로 할당되는 것이 좋습니다. 사용자의 비즈니스 중요성에 대한 고유 식별자는 태그 속성에 저장될 수 있습니다. Data#setTag(tag) 함수는 해당 데이터의 동적 변경을 허용합니다. 개체는 DataModel#getDataByTag(tag)를 통해 찾을 수 있으며 DataModel#removeDataByTag(tag)를 통해 데이터 개체 삭제를 지원합니다. 여기서는 JSON에서 Data 객체의 태그 속성을 설정하고 코드의 dataModel.getDataByTag(tag) 함수를 통해 Data 객체를 얻습니다.

 var fan1 = dataModel.getDataByTag('fan1');var fan2 = dataModel.getDataByTag('fan2');var 카메라1 = dataModel.getDataByTag('카메라1');var 카메라2 = dataModel.getDataByTag('카메라2');var 카메라3 = dataModel.getDataByTag('camera3');var redAlarm = dataModel.getDataByTag('redAlarm');var yellowAlarm = dataModel.getDataByTag('yellowAlarm');

아래 그림의 각 라벨에 해당하는 요소를 만들었습니다.

그런 다음 회전하고 플래시해야 하는 객체를 설정합니다. HT는 회전을 위해 setRotation(rotation) 함수를 캡슐화합니다. 객체의 현재 회전 각도를 획득하여 이 각도를 기반으로 특정 라디안을 추가하고 setInterval을 통해 정기적으로 호출합니다. 따라서 특정 시간 간격 내에 동일한 호를 회전할 수 있습니다.

 setInterval(function(){ var time = new Date().getTime(); var deltaTime = time - lastTime; var deltaRotation = deltaTime * Math.PI / 180 * 0.1; lastTime = 시간; fan1.setRotation(fan1.getRotation( ) + deltaRotation*3); fan2.setRotation(fan2.getRotation() + deltaRotation*3); Camera1.setRotation(camera1.getRotation() + deltaRotation/3); Camera2.setRotation(camera2.getRotation() + deltaRotation/3); if (time - StairTime > 500) { StairIndex--; (stairIndex < 0) { StairIndex = 8; } StairTime = time; } for (var i = 0; i < 8; i++) {//유사한 요소가 있기 때문에 설정한 태그 이름은 비슷하지만 1, 2, 3으로 대체되었으므로 for 루프를 사용하여 var color = StairIndex === i ? '#F6A623' : '#CFCFCF'; dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color); dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color); (new Date().getSeconds() % 2 === 1) { yellowAlarm.s('shape.Background', null); redAlarm.s('shape.Background', null) } else { yellowAlarm.s('shape.Background', 'yellow'); redAlarm.s('shape.Background', 'red'); );

HT는 또한 스타일을 설정하기 위해 setStyle 함수를 캡슐화합니다. 이는 s로 축약될 수 있습니다. 특정 스타일에 대해서는 HT for Web style 매뉴얼을 참조하십시오.

 for (var i = 0; i < 8; i++) {//유사한 요소가 있기 때문에 우리가 설정한 태그 이름은 비슷하지만 나중에 1, 2, 3으로 변경되므로 for 루프를 사용합니다. var color = StairIndex === i ? '#F6A623' : '#CFCFCF'; dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color); dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);}

또한, 경고등 깜박임에 대한 타이밍 제어를 수행합니다. 짝수이면 조명의 배경색이 무색으로 설정되고, 노란색 경보이면 노란색으로 설정됩니다. , 빨간색으로 설정됩니다.

 if (new Date().getSeconds() % 2 === 1) { yellowAlarm.s('shape.Background', null); redAlarm.s('shape.Background', null);}else { yellowAlarm.s ('모양.배경', '노란색'); redAlarm.s('모양.배경', '빨간색');}

전체 예제는 너무 쉽게 풀렸습니다. . .

이상은 에디터가 소개한 HTML5 Canvas 기반의 쇼핑몰 모니터링 예시에 대한 자세한 설명입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해 드리겠습니다. . 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!