react next.js引用第三方js方法

//在线字体引入为列:
//官方提供js代码如下:
(function(d) {
    var config = {
      kitId: 'ewt6vfg',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);




//进行整改如下:font.js

function font(){
(function(d) {
    var config = {
      kitId: 'ewt6vfg',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
}
module.exports = font;



//引用方法:
require('../public/js/font.js')(document);

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React Fabric.js是一个用于在React应用中使用Fabric.js库的封装。Fabric.js是一个强大的JavaScript库,用于创建和操作基于HTML5 Canvas的图形对象。通过使用React Fabric.js,您可以轻松地在React应用中创建和操作图形对象,如圆形、矩形、文本等。 要在React应用中使用React Fabric.js,您需要引入Fabric.jsReact Fabric.js的依赖,并在应用程序中创建相应的组件。首先,您需要在您的HTML文件中引入Fabric.js的库文件。然后,您可以使用React的组件生命周期方法,比如componentDidMount,来初始化Fabric.js并在Canvas上绘制图形对象。您还可以使用React的状态管理来更新图形对象的属性。 在React Fabric.js中,您可以使用Fabric.js的API来创建和操作图形对象。例如,您可以使用Fabric.js的Circle类来创建一个圆形对象,并设置其属性,如半径、位置和颜色。然后,您可以将该圆形对象添加到Canvas上,并在React组件中进行渲染。 下面是一个简单的示例代码,展示了如何在React应用中使用React Fabric.js来创建一个圆形对象: ```jsx import React, { Component } from 'react'; import { fabric } from 'fabric'; import './App.css'; class App extends Component { componentDidMount() { const canvas = new fabric.Canvas('canvas'); const circle = new fabric.Circle({ radius: 50, left: 100, top: 100, fill: 'red', }); canvas.add(circle); } render() { return ( <div className="App"> <canvas id="canvas" width={500} height={500}></canvas> </div> ); } } export default App; ``` 在上面的代码中,我们在组件的componentDidMount方法中初始化了Fabric.js的Canvas,并创建了一个半径为50、位于(100,100)的红色圆形对象。然后,我们将该圆形对象添加到Canvas上,并在组件的render方法中渲染Canvas。 通过使用React Fabric.js,您可以方便地在React应用中创建和操作图形对象,实现丰富的可视化效果和交互性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web16888

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值