Web前端笔记-two.js画三角形及画tip含tip旋转

程序运行截图如下：

旋转下：

代码如下：


import * as Two from "JS/two";
import * as $ from "JS/jquery";let isPressed = false;
let originalPositionX = 0;
let originalPositionY = 0;
let two;
let mouse;export function drawGraphic(){let elem = document.getElementById("draw-shapes");let params = {fullscreen: true,autostart: true}two = new Two(params).appendTo(elem);mouse = new Two.ZUI(two.scene);mouse.addLimits(0.1, 10);let $stage = $(two.renderer.domElement);$stage.bind('mousewheel wheel', function(event){let e = event.originalEvent;e.stopPropagation();e.preventDefault();let dy = (e.wheelDeltaY || -e.deltaY) / 1000;mouse.zoomBy(dy, e.clientX, e.clientY);});$stage.bind('mouseup', function(event){isPressed = false;});$stage.bind('mouseout', function(event){isPressed = false;})$stage.bind('mousemove', function(event){if(isPressed){let boolX = event.clientX - originalPositionX;let boolY = event.clientY - originalPositionY;mouse.graphicMove(boolX, boolY);originalPositionX = event.clientX;originalPositionY = event.clientY;}});$stage.bind('mousedown', function(event){isPressed = true;originalPositionX = event.clientX;originalPositionY = event.clientY;});//移动端触碰开始$stage.bind('touchstart', function (event){originalPositionX = event.changedTouches[0].pageX;originalPositionY = event.changedTouches[0].pageY;isPressed = true;});$stage.bind('touchend', function(event){isPressed = false;});$stage.bind('touchmove', function(event){let currentX = event.changedTouches[0].pageX;let currentY = event.changedTouches[0].pageY;let boolX = currentX - originalPositionX;let boolY = currentY - originalPositionY;mouse.graphicMove(boolX, boolY);originalPositionX = currentX;originalPositionY = currentY;});//移动端触碰结束let text = two.makeText("Hello", 0, 0);text.size = 20;text.fill = "red";text.rotation = 90 * Math.PI / 180;//查询let corona = makeTriangle(two, 100);corona.noStroke();corona.fill = "red";corona.translation.set(200, 200);let tip = makeTip(two, "错误", 'rgb(255, 255, 255)', 90);tip.translation.set(500, 500);
}function makeTriangle(two, size) {let tri = two.makePath(-size / 2, 0, size / 2, 0, 0, size);return tri;
}function makeTip(two, text, textColor, rotation){let group = two.makeGroup();let len = 100;let tip = two.makePath(-len / 2, -len / 3, -len / 2, -len, len / 2, -len, len / 2, -len / 3 , 0, 0 );tip.fill = 'red'tip.rotation = rotation * Math.PI / 180;group.add(tip);let txt = two.makeText(text, 0, -len / 1.8);txt.size = 20;txt.fill = textColor;group.add(txt);group.noStroke();//连文字一起旋转//group.rotation = rotation * Math.PI / 180;return group;
}

此处的三角形关键代码：

点1：(-size / 2, 0)

点2：(size / 2, 0)

点3：(0, size)

这里是一个倒三角形。

下面是tip的关键代码：

Web前端笔记-two.js画三角形及画tip含tip旋转相关推荐

Web前端笔记-two.js加载图片
目前关于two.js的资料,国内的不是很多,项目中要加载图片,官方文档上没有关于加载图片的相关资料,但在github生态圈找到了,在此记录下. 如下图片: 图片路径: 在JS文件中导入图片: impo ...
Web前端笔记-two.js实现坐标定位（动画效果非瞬移定位）
先来看下程序运行截图: 画图相关代码: ;import * as Two from "JS/two"; import * as $ from "JS/jquery&quo ...
Web前端笔记-two.js图形旋转动画的2种实现方式
这里有两种方式! 第一种是使用setInterval: 代码如下: let time = setInterval(function(){if(sun.sun.rotation >= TWO_PI ...
Web前端笔记（21-45）
Web前端笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例未加语义化标签添加语义化标签 23.表格属性 1.常见表格属 ...
Web 前端学习之js概述
Web 前端学习之js概述 1.JavaScript 介绍 Javascript 语言诞生主要是完成页面的数据验证.因此它运行在客户端,需要运行浏览器来解析执行JavaScript 代码. JS 是 ...
前端html继承的方式,好程序员web前端教程之JS继承实现方式解析
好程序员 web 前端教程之JS 继承实现方式解析 , JS 是 Web 前端三要素之一,也是每一个初学前端的同学遭遇的第一条拦路虎.很多人反应 JS 学习不易,各类知识点概念及应用常常让人抓耳挠腮 ...
web程序前后台功能实现_好程序员web前端教程之JS继承实现方式解析
好程序员web前端教程之JS继承实现方式解析,JS是Web前端三要素之一,也是每一个初学前端的同学遭遇的第一条拦路虎.很多人反应JS学习不易,各类知识点概念及应用常常让人抓耳挠腮.在接下来的北京Web ...
引入js_好程序员web前端教程分享js中的模块化一
好程序员web前端教程分享js中的模块化一:我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导 ...
怎么更好掌握Web前端技术？JS的跨域是怎么回事？
怎么更好掌握Web前端技术?JS的跨域是怎么回事?JavaScript跨域是指通过JS在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过JS获取页面中不同域的框架中(if ...

Web前端笔记-two.js画三角形及画tip含tip旋转

Web前端笔记-two.js画三角形及画tip含tip旋转相关推荐

最新文章

热门文章